Question

以下数据：

const arr1 = ['Val1', 'Val2', 'Val3'];
const arr2 = ['Val1', 'Val2', 'Val3'];
const arr3 = ['Val1', 'Val2', 'Val3'];

以下HTML：

<div *ngFor="let val of arr1>
   {{val}}
</div>
<div *ngFor="let val of arr2>
   {{val}}
</div>
<div *ngFor="let val of arr3>
   {{val}}
</div>

我想要显示

1. Val1
2. Val2
3. Val3
4. Val1
5. Val2
6. Val3
7. Val1
8. Val2
9. Val3

我知道我可以使用let i = index并使用类似{{arr1.length + arr2.length + i}}的内容但我可以拥有多个数组，并且显示的顺序可以以编程方式更改。我想要一个更智能的解决方案，不需要知道我正在显示的阵列的确切数量。我希望计数器使用HTML模板中*ngFor执行的顺序增加。

此外，我可以在一个HTML模板中使用多个*ngFor，我不想将计数器应用于所有这些模板。所以我有5个*ngFor，但只有3个应该有计数器。

Answer 1

您可以通过这种方式实现这一目标，仅使用单*ngFor

获取一个数组变量并将所有数组连接到其中。

然后在HTML中使用该新数组

您的组件可以是：

import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div *ngFor="let val of array;let i = index;">
        {{i + 1}}.{{val}}
      </div>
    </div>
  `,
})
export class App {
  public array = [];
  constructor() {
    const arr1 = ['Val1', 'Val2', 'Val3'];
    this.array = this.array.concat(arr1);
    const arr2 = ['Val1', 'Val2', 'Val3'];
    this.array= this.array.concat(arr2)
    const arr3 = ['Val1', 'Val2', 'Val3'];
    this.array = this.array.concat(arr3)
    console.log(this.array)
  }
}

Here is a working DEMO

Answer 2

如果我理解正确，你需要多个数组，如arr1，arr2，arr3，arr4，......

如果是这种情况，为什么不拥有超级阵列数组

const arr = [ ['val1', 'val2', 'val3'], [ 'val1', 'val2', 'val3'], ... ]

你可以有两个for循环来显示它，它可以用于n个数组

<div *ngFor="let a of arr">
    <div *ngFor="let b of a">
        {{ b }}
    </div>
</d>

多个* ngFor计数器

2 个答案: