如何访问 Typescript 文件中的循环 div 标签答案

【问题标题】：How to access looped div tag in Typescript file如何访问 Typescript 文件中的循环 div 标签
【发布时间】：2022-02-14 18:22:51
【问题描述】：

<div  class="mx-0 p-2 row"  style="box-shadow: 0 -1px 0 0 rgb(0 0 0 / 10%);">
    <div #myDiv (click)="navToOrder(value.agId,value.invoiceId,value.tableNo,value.currStageName)" [style.background-color]="value.currStageColor"

        class="table1 m-3"  *ngFor="let value of dashBoardTableList ;let i=index"     
        tooltip={{value.currStageName}} placement="top">
        <span class="homeTopLabel ">{{value.noOfCovers}}</span>
        <span class="leftGlass">
            <i *ngIf="value.currStageName!='Empty'" class="fa fa-glass "></i>
            <i *ngIf="value.currStageName=='Empty'" class=" fa fa-glass fa-flip-vertical"></i>
        </span>
        <span class="fa-stack middlePlate">
            <i class="fa fa-genderless fa-stack-2x" style="font-size:35px;"></i><i class="fa fa-spoon fa-stack-1x"
                style="font-size: 15px;top: 5px;left: -1.5px;"></i>
        </span>
        <span class="rightGlass">
            <i *ngIf="value.currStageName!='Empty'" class="fa fa-glass "></i>
            <i *ngIf="value.currStageName=='Empty'" class=" fa fa-glass fa-flip-vertical"></i>
        </span>

        <span class="homeBlabel">{{value.tableNo}}</span>

    </div>
</div>

这里我想获取 div 标签的特定索引，可惜 Tabindex 不能正常工作。还有其他方法吗？

【问题讨论】：

你想从哪里得到它？你已经在 ngFor 中创建了一个变量 i。这不是为您提供索引吗？
嗨，谢谢你的回复，是的，它会提供，但我需要通过打字稿应用样式，我想在 ts 文件中。如何获取特定的索引。例如，我有视图子和如何指向div标签的特定索引。希望你明白
使用 viewchildren 代替 viewchild
如果可以避免（大多数情况下可以），请不要使用 ViewChildren。这是非常严重的代码气味。我在下面提供了一个更“Angular”的解决方案。

标签： html angular typescript angular-material

【解决方案1】：

我已经投票支持@Will Alexander 的答案，但是对于代码，我会在这里解决一些小问题。对于选择器名称，将其修复为 [myStyleDirective] 而不是 'myStyleDirective'
对于setStyle 方法，请确保您传递了正确的参数，尤其是样式名称和样式值
这是一个工作示例：Stackblitz

【讨论】：

感谢您看到 Merna，我已经编辑了选择器的答案。
不客气，威尔 :)

【解决方案2】：

使用 @ViewChild 应用样式通常是 Angular 反模式。

听起来你真正想要的是一个指令，它将元素的索引作为参数，类似于：

import { AfterViewInit, Directive, ElementRef, Input, Renderer2 } from '@angular/core';

@Directive({
  selector: '[myStyleDirective]'
})
export class MyStyleDirective implements AfterViewInit {
  @Input() itemIndex!: number;
  
  constructor(private el: ElementRef, private renderer: Renderer2) {}
  
  ngAfterViewInit() {
    const styleValue = this.itemIndex % 2 === 0 ? 'even' : 'odd';
    this.renderer.setStyle(this.el.nativeElement, 'styleToChange', styleValue);
  }
}

然后将指令放在元素上：

<div *ngFor="let value of dashBoardTableList ;let i=index"
     myStyleDirective
     [itemIndex]="i"
     (click)="navToOrder(value.agId,value.invoiceId,value.tableNo,value.currStageName)"
     [style.background-color]="value.currStageColor"
     class="table1 m-3"
     tooltip={{value.currStageName}}
     placement="top">

您还可以使用 [ngStyle] 或 [ngClass] 并在您的 TypeScript 中使用一个方法，该方法返回给定索引的适当样式。但是，这可能会导致性能问题，因为该方法会在每个变更检测周期都被调用。

【讨论】：

感谢您的回复，正如您在上面提到的，我创建了directive.ts 并添加了您的代码，不幸的是它不起作用。即使日志也无法在directive.ts 中的控制台中打印
您是否在模块中声明了该指令并确保它可用于您的功能模块？另外，Merna 的更正是非常正确的，我将编辑我的答案以考虑到它。
非常感谢，现在可以使用了...
能否请您将答案标记为已接受，以便其他有相同问题的人更容易找到？
@VigneshVenkatesan 将答案标记为已接受是一种礼貌。