Запустите ngFor несколько раз - PullRequest
Новая
       15

Запустите ngFor несколько раз

0 голосов
/ 29 апреля 2019

Я использую Angular 7.

Я получил массив, и я делаю обычный ngFor в HTML: 

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

Есть ли способ итерациинад cardNames элементами более одного раза?

1 Ответ

3 голосов
/ 29 апреля 2019

"если массив был с" a "," b "," c ", я хочу, чтобы он или итерировал так: abcabc или вот так: 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% уверен в том, что с этим связаны какие-либо проблемы, только один из способов получить ответ, который вы ищете.

Повторять элемент HTML несколько раз, используя ngFor, на основе числа .

Во-вторых, просто лени, наверное. Вместо перебора массива со значениями, которые вы хотите перебора одного. Создайте новый массив, для каждого индекса старого массива дважды вставьте его в новый. Затем выполните итерацию по стандарту *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>
...