0

Fiz uma tabela que busca 100 itens de dentro da minha API, agora preciso numerar as linhas dessa tabela. Para isso, criei uma variável number chamada colunas e fiz um FOR:

colunas: number;


linhasTeste(){
      for(let i = 1 ; i < 101; i++){
        this.colunas  = i;
        console.log('linhas:', this.colunas);
      }
  }

O resultado do meu console.log retornar um contador de 1 a 100 que era o esperado, porém na minha coluna linhas, somente o último resultado do laço aparece.

<tbody>
  <tr *ngFor="let pokemon of pokemons[0]">
    <td>
      {{colunas}}
    </td>
    <td>
      {{pokemon.name}}
    </td>
    <td>
      {{pokemon.url}}
    </td>
  </tr>
  <tr>
</tbody>

Como posso fazer para exibir os números em ordem crescente em minha tabela de 1 até 100? Obrigado!

inserir a descrição da imagem aqui

1
  • 2
    Não precisa disso, o ngFor já possui um índice para poder ser utilizado no HTML, seria apenas fazer ngFor="let pokemon of pokemons[0]"; let idx = index e utilizar idx no lugar de colunas.
    – LeAndrade
    Commented 20/01/2021 às 19:10

1 Resposta 1

5

Eu dei uma olhada na documentação do Angular: https://angular.io/api/common/NgForOf#local-variables

E vi que em todo laço ngFor o angular fornece algumas variáveis para você, e entre elas, ele fornece a index, que é o que você precisa. Aí o html poderia ficar assim:

<tbody>
  <tr *ngFor="let pokemon of pokemons[0]">
    <td>
      {{index + 1}}
    </td>
    <td>
      {{pokemon.name}}
    </td>
    <td>
      {{pokemon.url}}
    </td>
  </tr>
  <tr>
</tbody>

Ou se quiser utilizar o nome colunas ao invés de index.

<tbody>
  <tr *ngFor="let pokemon of pokemons[0]; index as colunas">
    <td>
      {{colunas + 1}}
    </td>
    <td>
      {{pokemon.name}}
    </td>
    <td>
      {{pokemon.url}}
    </td>
  </tr>
  <tr>
</tbody>

ATUALIZAÇÃO: Foi necessário colocar o + 1 porque o valor do index começa em zero, não em 1.

2
  • 1
    boa só colocaria index+1 pq começa em 0 Commented 20/01/2021 às 20:05
  • verdade... Vou corrigir ali
    – mws_souza
    Commented 20/01/2021 às 20:45

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 .