5

Olá, tenho um array items:any[] e quero iterar na view com o *ngfor, porém, estou utilizando uma template <carousel> onde para cada item desse slide eu chamo <carousel-item>, hoje meu código segue esta hierarquia:

<carousel>
  <carousel-item>
    <div *ngFor="let item of items">
      {{item.nome}}
    </div>
  </carousel-item>
  <carousel-item>
    <!-- outro conteúdo -->
  </carousel-item>
</carousel>

Com esse código eu tenho o seguinte resultado, note que o item 5 acaba excedendo o div:

inserir a descrição da imagem aqui

Minha dúvida: eu quero que, a cada 4 elementos do items ele crie um novo template <carousel-item>, de forma a ficar dessa maneira:

inserir a descrição da imagem aqui

Gostaria de saber se tem como resolver meu problema utilizando apenas a iteração do *ngFor e algum *ngIf ou modificando algo na hierarquia, mas não tenho ideia de como resolver sem prejudicar o desempenho da aplicação.

Desde já agradeço.

1
  • Tive um problema semelhante porém só consegui chamando uma função no ngFor que retorna um array de arrays, sendo os sub arrays com no máximo 4 itens, dai usei dois loops
    – Costamilam
    Commented 1/03/2019 às 18:13

1 Resposta 1

1

Você tem que dividir transformar seu array de items para uma matrix Exemplo:

['a', 'b', 'c', 'd', 'e'];

deverá virar

[ ['a', 'b', 'c', 'd'], ['e'] ];

Depois de transformar seu array em matriz, você pode adicionar um ngFor no seu carousel-item, exemplo:

// seu-component.ts
chunkItems: any = [];

ngOnInit() {
    this.chunkItems();
}

/** Transforma seu array de items em chunks **/
chunkItems() {
    this.chunkItems = [];
    const numberOfItemsPerRow = 4;
    for(let i = 0; i < this.items.length; i += numberOfItemsPerRow) {
        this.chunkItems.push(this.items.slice(i, i + numberOfItemsPerRow));
    }
}

// seu-component.html
<carousel>
  <carousel-item *ngFor="let chunkItem of chunkItems">
    <div *ngFor="let item of chunkItem">
      {{item.nome}}
    </div>
  </carousel-item>
</carousel>
1
  • Perfeito, você acaba de salvar um dia
    – Anzell
    Commented 1/03/2019 às 18:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .