Angular2中嵌套ngFor循环的计数器

Posted 2023-02-22

【中文标题】Angular2中嵌套ngFor循环的计数器

【英文标题】：Counter for nested ngFor loops in Angular2

【发布时间】：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>

【参考方案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 方法