Angular2 中嵌套 ngFor 循环的计数器

Question

我在 Angular2 中有两个嵌套的 *ngFor 循环。我想维护一个计数器，每次重复循环中心的代码时它都会递增。

计数器应该从 0 到 调整数 乘以 刀片数

  <tr *ngFor="let adjustment of adjustments">

    <td *ngFor="let blade of blades">

      <span> Counter =  ?????????  </span>

    </td>

  </tr>

Answer 1

为两个 *ngFor 语句添加一个计数器变量，比如 i 和 j，然后将数学作为表达式进行计算。这是代码：

  <tr *ngFor="let adjustment of adjustments; let i = index">

    <td *ngFor="let blade of blades; let j = index">

      <span> Counter = {{ (i * blades.length) + j }} </span>

    </td>

  </tr>

Answer 2

如果每个调整列表对应的刀片列表不同。然后在下面使用。将 lstMain 视为 Adjustments，将 lstChild 视为 Blades。 lstMain =[ {lstChild:{1,2}},{lstChild:{5,6,7,8}},{lstChild:{12}},{lstChild:{14,15,16}} ] 以这个例子为例, 它将给出正确的数据。基本上在 SetSeqNo 方法中，计数器变量计算先前迭代的过去 lstChild 长度，然后在其中添加当前索引 j，这将给出当前索引的确切计数器值。

<ng-container *ngFor="let obj of  lstMain;let i=index">
    <ng-container *ngFor="let child of  obj.lstChild;let j=index">
        <tr>
            <td>
                <span>{{SetSeqNo(i,j,lstMain)}}</span>
            </td>
        </tr>
    </ng-container>
 </ng-container>

SetSeqNo(i,j,lst){
    let Counter=0;
    for(let k=0;k<=i-1;k++){
       Counter=Counter+lst[k].lstChild.length;
    }
    return Counter + j + 1;
}

Angular2 中嵌套 ngFor 循环的计数器

Counter for nested ngFor loops in Angular2

ngfor

angular