Angular 在嵌套的*ngFor中生成累积索引

我有一个嵌套的对象列表，每个对象内部都有一个数组

arr: any[] = [
    { 'title': 'fruits', res: ['apple', 'pear'] }, 
    { 'title': 'numbers', res: [3, 5, 7, 11] },
    { 'title': 'letters', res: ['a', 'b'] }];
];` 

我希望迭代每个嵌套数组

res

，并输出累积索引，以便上面的输出等于：

fruits
0 - apple
1 - pear

numbers
2 - 3
3 - 5
4 - 7
5 - 11

letters
6 - a
7 - b

Angular公开了局部变量

索引

，但是有没有一种方法可以定义其他局部变量并在执行过程中增加它们。类似下面的内容（我知道这不会渲染）

{{list.title}
{{count}}-{{item}

到目前为止，我唯一的工作选项是一个函数，每当我想显示一个项目时就会调用它，这不是很有效

getCumIndex(arr: any[], x: number, y: number){
    let count: number = 0;
    for (let i = 0; i < arr.length; i++){
        if (x == i){
            return count + y;
        } else {
            count += arr[i].res.length;
        }
    }
}

getCumIndex（arr:any[]，x:number，y:number）{
让计数：数字=0；
for（设i=0；i

非常简单的解决方案。 这是您的模板：

<div *ngFor="let list of comboList; let i = index;">
    <h1>{{ list.title}}</h1>
    <div *ngFor="let item of list.res; let j = index;">
       {{ cumulativeLength(i) + j }} - {{ item }}
    </div>
</div>

{{list.title}
{{cumulativeLength（i）+j}}-{{item}

然后在控制器中：

cumulativeLength(index) {
    let acc = 0;
    for (let i = 0; i<index; i++) {
        acc += this.comboList[i].res.length;
    }
    return acc;
}

累计长度（索引）{
设acc=0；
对于（设i=0；i非常简单的解决方案）。
这是您的模板：

<div *ngFor="let list of comboList; let i = index;">
    <h1>{{ list.title}}</h1>
    <div *ngFor="let item of list.res; let j = index;">
       {{ cumulativeLength(i) + j }} - {{ item }}
    </div>
</div>


{{list.title}
{{cumulativeLength（i）+j}}-{{item}

然后在控制器中：

cumulativeLength(index) {
    let acc = 0;
    for (let i = 0; i<index; i++) {
        acc += this.comboList[i].res.length;
    }
    return acc;
}

累计长度（索引）{
设acc=0；
对于（设i=0；i除角度预定义ng属性外的任何自定义逻辑都应在组件中执行，而不是在视图中执行。
除角度预定义ng属性外的任何自定义逻辑都应在组件中执行，而不是在视图中执行。
对于具有自定义管道和辅助类的解决方案

<div *ngFor="let counter of [comboList | counterPipe]">
  {{ counter.reset() }}
  <div *ngFor="let list of comboList">
    <h1>{{ list.title }}</h1>
    <div *ngFor="let item of list.res">
      {{ counter.inc() }} - {{ item }}
    </div>
  </div>
</div>


{{counter.reset（）}}
{{list.title}}
{{counter.inc（）}-{{item}
用于使用自定义管道和辅助类的解决方案

<div *ngFor="let counter of [comboList | counterPipe]">
  {{ counter.reset() }}
  <div *ngFor="let list of comboList">
    <h1>{{ list.title }}</h1>
    <div *ngFor="let item of list.res">
      {{ counter.inc() }} - {{ item }}
    </div>
  </div>
</div>


{{counter.reset（）}}
{{list.title}}
{{counter.inc（）}-{{item}
创建一个只包含
res
key？元素的新数组，然后在其上使用
*ngFor
不是更好。这是我的用例的简化版本。每个对象都是从一个单独的服务异步返回的，并且输出不像每个项目打印一行那样简单。创建一个新数组不是更好吗哪一个元素只来自
res
键？然后在其上使用
*ngFor
。这是我的用例的简化版本。每个对象都是从一个单独的服务异步返回的，并且输出不像每项打印一行那么简单，这是一个与我已有的解决方案几乎相同的解决方案，如中所述question@ChristopherMoore您可以在加载res数组后计算它们的长度question@ChristopherMoore您可以在加载res数组后计算它们的长度。谢谢。我喜欢这样，在t中使用
WeakMap
有什么好处计数器？如果对WeakMap键的所有引用都丢失，并且没有对该值的更多引用，那么该值可以被垃圾收集。因此，您不需要从中删除项。明白，但是使用
WeakMap
aproach与类似的方法相比有什么好处：没有好处，您的版本更好，应该是我们的ed而不是
WeakMap
谢谢。我喜欢这样，在计数器中使用
WeakMap
有什么好处？如果对WeakMap键的所有引用都丢失了，并且没有对该值的更多引用，那么该值可以被垃圾收集。因此，您不需要从中删除项目。明白，但是使用
WeakMap
aproach，与此类似：没有优势，您的版本更好，应该使用，而不是
WeakMap