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 视为调整项，将 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;
}

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

2 个答案: