-1

Gostaria de saber como faço para limitar meu NgFor a passar apenas 6 vezes??

No meu .TS importei esse modulo abaixo...

import { NgForOf } from '@angular/common';

Tentei usar dessa maneira abaixo, porém não funcionou...

 <div *ngFor="let concessionaria of concessionarias; index as i">
    <vw-component-dealers [concessionaria]="concessionaria" ></vw-component-dealers>        
</div>

1 Resposta 1

2

Você pode user o slice com o ngFor para determinar as posições da lista que precisar, uma referência: https://angular.io/api/common/SlicePipe.

<div *ngFor="let concessionaria of concessionarias | slice:0:5 ; index as i"> <vw-component-dealers [concessionaria]="concessionaria" ></vw-component-dealers></div>

No caso acima ele passa pelas posições 0 até a 5 da lista.

5
  • Funcionou perfeitamente! me tira apenas mas uma dúvida? Em baixo desse component, existe um botão aonde ao clicar exibira mais 3 component seguindo a lista passada pelo NgFor, ou seja, se eu exibi do 0 ao 6, ao clicar no botão, tem que aparecer mais 3 components seguindo do 7 ao 10, e assim por diante!! Teria como fazer isso usando esse pipe? 17/04/2018 às 12:11
  • Para fazer isso, você pode utilizar o ngIf com o ngFor para mostrar na tela apenas os elementos cujo as posições deseja, o botão pode servir para mudar os valores de range. 17/04/2018 às 12:31
  • Você pode também adicionar uma propriedade para seu componente que incremente os valores no slice a parti do evento do botão: slice:0+range:6+range. 17/04/2018 às 12:47
  • Aqui tem um exemplo utilizando Slice com a propriedade do componente: embed.plnkr.co/l1oTNT 17/04/2018 às 13:29
  • Da segunda maneira funcionou perfeitamente!! Obrigado 17/04/2018 às 13:38

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 .