Angular 中嵌套 for 循环的增量计数器

Question

<tr *ngFor="let adjustment of adjustments; let i = index">
  <td *ngFor="let blade of adjustment.blades; let j = index">
    <span> Counter = {{ ???? }} </span>
  </td>
</tr>
adjustments= [[blades: [a]], 
              [blades: [a]], 
              [blades: [a,b,c]], 
              [blades: [a,b]]
             ]

输出：

计数器 = 1

计数器 = 2

计数器 = 3

计数器 = 4

计数器 = 5

计数器 = 6

Answer 1

为什么不在代码中展平数组并在展平的数组之上遍历。

那样会更简单:

const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());

方法 2:

您可以编写 2 个函数来获取计数和对象：

  getBlade(i,j) {
    return this.adjustments[i].blades[j];
  }

 getCount(i: number, j: number) {
    let len= 0;
    for(let x = 0; x<i; x++) {
      len = len + this.adjustments[x].blades.length;
    } 
    return len + (j+ 1);
  }

然后在 HTML 中，您可以查找对象或计数：

<tr *ngFor="let adjustment of adjustments; let i = index">
  <td *ngFor="let blade of adjustment.blades; let j = index">
    <span> Counter = {{ getCount(i,j) }} : {{getBlade(i,j)}} , 
    </span>
  </td>
</tr>

Answer 2

您可以使用附加到要计算的元素的指令来实现它：

@Directive({
  selector: '[appCounter]',
  exportAs: 'appCounter'
})
export class CounterDirective implements AfterViewInit {
  static nextIndex = 0;

  @Input() appCounter: number | string = '';

  index;

  constructor() {
    this.index = CounterDirective.nextIndex++;
  }
  
  ngAfterViewInit(): void {
    if (typeof this.appCounter === 'string') {
      return;
    }
    CounterDirective.nextIndex = this.appCounter;
  }
}

模板中的用法：

<ng-container [appCounter]="0">
  <tr *ngFor="let adjustment of adjustments; let i = index">
    <td *ngFor="let blade of adjustment.blades; let j = index">
      <span #counter="appCounter" appCounter> Counter = {{ counter.index }} </span>
    </td>
  </tr>
</ng-container>

ng-container 用于重置计数器。

StackBlitz example

Angular 中嵌套 for 循环的增量计数器

Increment counter for nested for loop in Angular

javascript

angular

angular6