1

Eu tenho um código em html no angular com informações que vem da API. Gostaria de enumerar essa lista de acordo com sua quantidade sem precisar criar um id no banco.

Exemplo:

1 nomeDocarro1, Dono1, descricao1

2 nomeDocarro2, Dono2, descricao2

3 nomeDocarro3, Dono3, descricao3

Queria acrescentar os números 1,2,3 na lista por exemplo, e na medida que tiver mais informações vindo da API, teriam mais números ordenando.

  <div *ngFor="let carros of carro" class="margin-bottom-20 width-100-l">
    <div class="historico-titulo">
        <div class="nome-carro">
            {{carros .nome}} <br />
        </div>
        <div class="carro-dono" >
            <strong>{{carros.dono.toUpperCase()}}</strong>
        </div>
    </div>
    <div class="texto">
        <span>{{carros .texto}}</span>
    </div>
</div>

1 Resposta 1

3

Você pode usar o próprio índice do seu *ngFor para adicionar a numeração:

<div
  *ngFor="let carros of carro ; let iCarro = index"
  class="margin-bottom-20 width-100-l"
>
  <div class="historico-titulo">
    <div class="nome-carro">{{carros .nome}} {{ iCarro }} <br /></div>
    <div class="carro-dono">
      <strong> {{carros.dono.toUpperCase()}} {{ iCarro }}</strong>
    </div>
  </div>
  <div class="texto">
    <span>{{carros .texto}} {{ iCarro }}</span>
  </div>
</div>

Como o índice inicia no 0, caso queira que sua numeração inicie no 1, acrescente
{{ iCarro + 1 }}

1
  • Exatamente isso, muito obrigada
    – Carlos
    4/10/2020 às 22:55

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 .