Question

基本上，我需要为我的双ngFor循环保留一个总体索引。

示例：

Header 1
item 1 - index = 0
item 2 - index = 1
item 3 - index = 2

Header 2 
item 1 - index = 3

Header 3 
item 1 - index = 4
item 2 - index = 5

我尝试过使用自定义指令然后调用增量函数，但是这似乎只是在太快地更新类索引。看这里：Call a function inside ngFor in angular2

Answer 1

您可以通过调用方法getIndex(i, j)获得每个元素的全局索引，该方法接受两个循环索引作为参数：

<div class="group" *ngFor="let group of data; let i = index">
  Header {{i + 1}}
  <div *ngFor="let item of group; let j = index">
    Item {{j + 1}} - index = {{ getIndex(i, j) }}
    </div>
</div>

，它使用Array.reduce()如下：

data = [
  ["a", "b", "c"],
  ["p"],
  ["x", "y"],
];

getIndex(outerIndex, innerIndex) {
  return this.data.reduce((accumulator, currentGroup, groupIndex) => {
    return accumulator + (groupIndex < outerIndex ? currentGroup.length : 0);
  }, innerIndex);
}

有关演示，请参见this stackblitz。

这里是getIndex(i, j)的替代版本，它使用一个简单的for循环：

getIndex(outerIndex, innerIndex) {
  let totalIndex = innerIndex;
  for (let groupIndex = 0; groupIndex < outerIndex; groupIndex++) {
    totalIndex += this.data[groupIndex].length;
  }
  return totalIndex;
}

如何使用双* ngFor获得动态和总体索引

1 个答案: