Question

在Angular 4中，我试图创建一个嵌套的for循环

   <div *ngFor="let p of prop">

    <div *ngFor="let a of p.values">

    Count is  {{count=count+1}}

如何在模板内部创建局部变量计数，并在每次内循环执行时递增它。我需要在以后的部分重用这个计数来获取数据，即值[count]。姓名......

输出：

计数为0 数是1 数是2 数是3 数是4

Answer 1

您可以直接使用索引值

  <div *ngFor="let a of values; let i= index;">
     <h1>Count is  : {{i}} </h1>
  </div>

<强> STACKBLITZ DEMO

修改

<强> Updated demo for nested ngFor

<强> EDIT

如果对象中的值具有不同的长度，则需要某种逻辑来进行计算。我已经实现了一个自定义管道。

@Pipe({ name: 'counterPipe' }) export class CounterPipe implements PipeTransform { transform(value: any): Counter { if (!counters.has(value)) { counters.set(value, new Counter()); } return counters.get(value); } }

<强> DEMO

Answer 2

我遇到了与您同样的问题，因为我需要对表中的行进行计数，然后我想出了这种解决方案，它对我来说就像是魅力

<td mat-cell *matCellDef="let i= index;"> {{ [i+1] }} </td>

这很简单，也不需要管道。希望能帮助到你。

Answer 3

假设你的列表是这样的

prop =[ {values:{}},{values:{}},{values:{}},{values:{}} ]

您需要在 values 对象中添加一个类似 SeqNo 的属性来存储序列值

<div *ngFor="let p of prop">

    <div *ngFor="let a of p.values">

        <span>Count is  {{GetSeqNo(i,j,a,prop)}} </span>

    </div>

</div>

GetSeqNo(i, j, a, lst) {
    let Counter = 0;

    for (let k = 0; k <= i - 1; k++) {
        Counter = Counter + lst[k].values.length;
    }

    a.SeqNo = Counter + j + 1;

    return a.SeqNo;
}

稍后您可以使用 for 循环获取计数 prop[i].values[j].SeqNo

如何增加嵌套for循环的变量计数并打印它

3 个答案: