Question

我通过以下方式生成6x6网格：

<ion-grid>
      <ion-row *ngFor="let rowIndex of createRange(6)" [attr.id]="'row-'+rowIndex">
        <ion-col col-2 *ngFor="let colIndex of createRange(6)" [attr.id]="'row-'+rowIndex+'-col-'+colIndex">
          <circle [size]="'100%'" [color]="'lightgray'"></circle>
        </ion-col>
      </ion-row>
</ion-grid>

createRange（）函数只生成一个顺序填充元素的数组，如[0,1,2]等。

<circle>是我的组成部分，但无论如何

自动生成每行（例如第1行）和每列（例如第1行-col-3）的ID是什么问题。

问题是：在这种情况下，我应该如何正确地通过Id获取元素？

我尝试使用#id和@ViewChild()，但我不知道自动生成#ids

现在我只是使用js来完成这项任务，例如：

document.getElementById('row-1').style.backgroundColor = 'blue';

我该怎么做？

Answer 1

执行此操作的角度方式是使用指令以避免使用DOM ¹。有关示例的信息，请参见this plunkr。

长篇短语将局部变量rowIndex和colIndex短传到圆形组件的指令

<circle 
    customDirective
    [rowIndex]="rowIndex"
    [colIndex]="colIndex"
    [size]="'100%'"
    [color]="'lightgray'"></circle>

然后作为customDirective：

@Directive({
  selector: '[customDirective]'
})
class CustomDirective {
  @Input() rowIndex: number;
  @Input() colIndex: number;
  constructor(public elementRef: ElementRef) {}
}

最后在离子网格组件类中，您将可以通过以下方式访问每个元素：

@ViewChildren(CustomDirective) circles: QueryList;

通过id Angular 2获取自动生成元素的正确方法

1 个答案: