Question

我正在使用Angular7。

我有一个数组，并且正在HTML中执行通常的ngFor：

<mat-card *ngFor="let card of cardNames">

是否有一种方法可以多次遍历cardNames元素？

Answer 1

”“如果数组使用“ a”，“ b”，“ c”，则我希望它以这样的方式进行迭代：abcabc或这样的方式：aabbcc”

在*ngFor处为您提供一个奇怪的选项，使用重复和拆分来确定要重复多少次，然后在该显示范围内显示您想要的数组。很奇怪，但给出您想要的。

public fetchData = ['a', 'b', 'c'];

然后在模板中。 2是您要重复嵌套的*ngFor多少次的计数。

<div *ngFor = "let x of ' '.repeat(2).split('')">
  <div *ngFor="let titlee of fetchData">
      {{ titlee }}
  </div>
</div>

这将以DOM打印。

a
b
c
a
b
c

我不能100％地确定这是否有任何相关问题，这只是获得所需答案的一种方法。

Repeat HTML element multiple times using ngFor based on a number。

第二种方法，我想就是懒惰。而不是使用要迭代的值迭代数组。创建一个新数组，对于旧数组的每个索引，将其推入新数组两次。然后像往常一样使用标准*ngFor

对其进行迭代

  public fetchData = ['a', 'b', 'c'];
  public dupedData = [];

  public ngOnInit(): void 
  {
    this.fetchData.forEach(data => 
    {
      this.dupedData.push(data);
      this.dupedData.push(data);

    });
  }

然后是简单的模板。

<div *ngFor="let titlee of dupedData">
  {{ titlee }}
</div>

哪个会给你

a
a
b
b
c
c

以下将有效地提供相同的条件。

<div *ngFor="let titlee of fetchData">
  <div>{{ titlee }}</div>
  <div>{{ titlee }}</div>
</div>

多次运行ng

1 个答案: