Angular2中嵌套ngFor循环的计数器答案

【问题标题】：Counter for nested ngFor loops in Angular2Angular2中嵌套ngFor循环的计数器
【发布时间】：2017-07-01 05:16:28
【问题描述】：

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

计数器应该从 0 变为 调整次数 乘以 叶片数

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

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

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

    </td>

  </tr>

【问题讨论】：

标签： angular ngfor

【解决方案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>

【讨论】：

如果每个调整中的刀片大小不同，它将不起作用......

【解决方案2】：

如果每个调整列表对应的刀片列表不同。然后在下面使用。将 lstMain 视为调整，将 lstChild 视为刀片。 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;
}

【讨论】：

lstMain =[ {lstChild:{1,2,3,4}},{lstChild:{5,6,7,8}},{lstChild:{9,10,11,12 }},{lstChild:{13,14,15,16}} ] 以这个例子为例，它会给出正确的数据。基本上在 SetSeqNo 方法中，计数器变量计算先前迭代的过去 lstChild 长度，然后在其中添加当前索引 j，这将给出当前索引的确切计数器值。
每次组件发生事件时都会调用 SetSeqNo 方法