运行 ng多次

Question

我正在使用 Angular 7.

我有一个数组，我正在 HTML:

中执行通常的 ngFor

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

有没有办法多次迭代 cardNames 元素？

Answer 1

"if the array was with "a", "b", "c", i want it to either iterate like this: abcabc or like this: aabbcc"

这里有一个奇怪的 *ngFor，使用 repeat 和 split 来确定您希望数组重复多少次，然后在其中显示您想要的数组。很奇怪，但给了你想要的。

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% 确定这是否有任何相关问题，这只是获得您正在寻找的答案的一种方式。

.

对于第二种方式，我猜只是偷懒。而不是用你想要迭代一个的值来迭代数组。创建一个新数组，对于旧数组的每个索引将其推送到新数组两次。然后像往常一样使用标准 *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多次

Run ngFor several times

angular

angular7

ngfor