0

Pessoal quando quero usar o *ngFor="let animal of produtos"> no html no meu projeto angular não funciona não da para usar e as variáveis dentro do {{}} também não funcionam !

CÓDIGO HTML

<div class="class">
  <h1>Produtos:</h1>
  <ul>
    <li *ngFor="let animal of produtos">
      Nome: {{ animal.name }} - tipo: {{ animal.type }}
      <button (click)="showAge(animal)">Show Age</button>
      <button (click)="removeAnimal(animal)">Excluir</button>
    </li>
  </ul>
  <h3>{{ animalDetails }}</h3>
</div>

Como mostra a imagem ele não funciona diferente da video aula que estou acompanhando!

inserir a descrição da imagem aqui

imagem da video aula:

inserir a descrição da imagem aqui

1
  • A única coisa que está diferente é de of animals para of produtos. Só podemos ajudar com esta informação!
    – LeAndrade
    7/07/2022 às 19:52

1 Resposta 1

-2

Veja se o array dentro do seu typescript que você quer percorrer com o *ngFor está com o nome correto. No vídeo mostra como animals você usou produtos, a variável que vc chama no html e no typescript precisam possuir o mesmo nome. Se isso não resolver pode ser a importação do CommonModule.

Para utilizar *ngIf, *ngFor e outras diretivas nativas do Angular você precisa fazer a importação do módulo nativo CommonModule dentro do módulo onde seu componente foi declarado.

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

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    MeuComponenteComponent
  ]
})

export class MeuModuloModule { }

Certifique-se que fez a importação, esse tipo de problema não emite erro então pode passar despercebido mesmo.

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 .