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

Question

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

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

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

    Count is  {{count=count+1}} 

如何在模板内创建一个局部变量 count 并在每次执行内部循环时递增它。我需要在后面重用这个计数来获取数据，即 Values[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

编辑

当您的对象中有不同长度的值时，您需要某种逻辑来进行计算。我已经实现了一个自定义管道来做到这一点。

@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