Não é possível vincular a 'ngForOf', pois não é uma propriedade conhecida de 'tr' (versão final)

128

Estou usando a versão final do Angular2 (2.1.0). Quando quero exibir uma lista de empresas, recebi esse erro.

em file.component.ts:

public companies: any[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];

em file.component.html:

<tbody>
  <tr *ngFor="let item of companies; let i =index">
     <td>{{i}}</td>
     <td>{{item.name}}</td>
  </tr>
</tbody>
Mourad Idrissi
fonte
9
certifique-se de que você não cometeu um erro de digitação também ngforpara o erro mencionado. Deveria serngFor
Piotr Kula
angular também diferencia maiúsculas de minúsculas.
Iftikhar Ali Ansari

Respostas:

238

Adicionar BrowserModulepara imports: []nos @NgModule()se é o módulo de raiz ( AppModule), caso contrário o CommonModule.

// older Angular versions
// import {BrowserModule, CommonModule} from '@angular/common';

import { BrowserModule } from '@angular/platform-browser'
..
..
@NgModule({
  imports: [BrowserModule, /* or CommonModule */],
  ..
})
Günter Zöchbauer
fonte
2
sim eu tenho vários módulos. Eu esqueci isso. Funciona agora :) obrigado u
Mourad Idrissi 30/10
4
Pode valer a pena mencionar que o CommonModule está localizado em '@ angular / common' para que você deve certificar-se de adicionar importação {CommonModule} de '@ angular / comum'
knsheely
4
Eu tive um problema semelhante. meu aplicativo possui vários módulos, a instrução do módulo Importar navegador precisa ser adicionada no módulo de aplicativo e em outro módulo.
ssmsnet
1
Eu tinha vários módulos. Isso salvou o meu dia. Obrigado!
fabricioflores
1
às vezes pode ser um erro de digitação simples, o mesmo erro acontece quando se faz "* ngFor =" deixar de passageiros ou de passageiros"<--- aviso: 'ou' deve ser 'de' ;-)
michabbb
44

No meu caso, o problema era que meu colega de equipe mencionou *ngfornos modelos em vez de *ngFor. Estranho que não haja erro correto para lidar com esse problema (no Angular 4).

Senhor Verde
fonte
bem que poderia ter me jogado para um laço;)
tony09uk
1
Similar: eu escrevi *ngFor="let diagram if diagrams", observe o if. Uma mensagem de "erro de interpretação" seria melhor ...
klenium
@klenium, você salvou meu dia! Eu recebi esse erro ao usar *ngFor="lang in languages"onde angular 8 espera *ngFor="let lang of languages". Mensagem de erro bastante enganosa imo: /
Jona Paulus
36

Você precisa importar 'CommonModule' no módulo em que você está usando essas diretivas internas, como ngFor, ngIf etc.

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }
Codiee
fonte
3
você diz importá-lo no componente, em seguida, mostrar código de importá-lo para o módulo
Chris - Haddox Technologies
10

Coisas para lembrar:

Quando módulos personalizados são usados ​​(outros módulos que não o AppModule), é necessário importar o módulo comum nele.

yourmodule.module.ts

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

@NgModule({
  imports: [
    CommonModule
  ],
  exports:[ ],
  declarations: []
})
Rut Shah
fonte
Você sabe por que eu receberia esse erro / aviso realmente no chrome, mesmo depois de ter o commonModule na classe do meu filho / módulo personalizado?
Ak777 10/07
7

Se você estiver criando seu próprio módulo, adicione CommonModule nas importações em seu próprio módulo

Alok Kamboj
fonte
Adicionando o CommonModule funcionou para mim Melhore sua resposta. Compartilhe as etapas também
Ashish Yadav
5

Isso também pode acontecer se você não declarar um componente de rota no seu módulo de recurso. Então, por exemplo:

feature.routing.module.ts:

...
    {
        path: '',
        component: ViewComponent,
    }
...

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

Observe que o ViewComponent não está na matriz de declarações, enquanto deveria estar.

Max Mumford
fonte
Obrigado cara, este não foi o meu problema, mas me deu uma dica e bingo, meu problema está resolvido !!
Abhinav Saxena
1

Módulo personalizado Precisa de um módulo comum

import {CommonModule} de "@ angular / common";

@NgModule ({importações: [CommonModule]})

Vinayak Shedgeri
fonte
1

Quando usamos "app-routing.module", esquecemos de importar "CommonModule". Lembre-se de importar!

import { CommonModule } from "@angular/common";
@NgModule({  imports: [ CommonModule]})
Juan Carlos WebMaster Ajahuana
fonte
1

Eu tive o mesmo erro, mas eu tinha o CommonModule importado. Em vez disso, deixei uma vírgula onde não deveria estar por causa da cópia / colar ao dividir um módulo:

@NgModule({
    declarations: [
        ShopComponent,
        ShoppingEditComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild([
            { path: 'shop', component: ShopComponent }, <--- offensive comma
        ])
    ]
})
scsx
fonte
1

app.module.ts corrigido e alterado para: importe o BrowserModule no seu módulo de aplicativo

import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [
    AppComponent    
  ],
  imports: [
    BrowserModule, 
  ],     
  providers: [],
  bootstrap: [AppComponent]
})
Sanjay kumar
fonte
1

Eu estava recebendo o mesmo erro. Você pode corrigir um destes métodos:

  1. Se você não possui nenhum módulo aninhado

    uma. Importe o CommonModule no seu módulo App

    b. Importe seu componente para o qual você está adicionando * ngFor no módulo App , defina nas declarações

// file App.modules.ts
@NgModule({
  declarations: [
    LoginComponent // declarations of your component
  ],
  imports: [
    BrowserModule
    DemoMaterialModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    ApiService, 
    CookieService, 
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ApiInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})

c. Se você estiver usando o arquivo de módulo separado para roteamento, importe o CommonModule no seu módulo de roteamento. Caso contrário, importe o CommonModule no seu módulo de aplicativo.

// file app.routing.modules.ts
import { LoginComponent } from './login/login.component';
import { CommonModule } from "@angular/common";

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent }
];

@NgModule({
  imports: [RouterModule,RouterModule.forRoot(routes), CommonModule],
  exports: [RouterModule]
})
  1. Se você tiver um módulo aninhado, execute a 1ª etapa nesse módulo específico

No meu caso, o segundo método resolveu meu problema.
Espero que isso ajude você

Akshay Sharma
fonte
1

Para mim, o problema era que eu não importei o módulo personalizado HouseModuleno meu app.module.ts. Eu tinha as outras importações.

Arquivo: app.module.ts

import { HouseModule } from './Modules/house/house.module';

@NgModule({
  imports: [
    HouseModule
  ]
})
Ruben Szekér
fonte
1

Leitores futuros

Verifique cada um dos seguintes:

  • O componente é declarado em um único módulo angular
  • Assegure-se de ter import { CommonModule } from '@angular/common';
  • Reinicie o IDE / editor
Ben Winding
fonte
0

Eu sou iniciado no projeto ao vivo da base Angular8, obtive o problema acima, mas ao usar "app-routing.module", esquecemos de importar "CommonModule". Lembre-se de importar!

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

@NgModule({
  imports: [
    CommonModule
]})

Isso resolverá o seu erro.

Nagnath Mungade
fonte
0

Este problema aparece quando o uso de rotas, podemos exibir o conteúdo estático de qualquer módulo, mas ao tentar usar a funcionalidade ani como * ngIg não funciona, por exemplo, é necessário trabalhar como, por exemplo, @Ruben Szeker, seria necessário adicionar o componente em app.module.ts nas importações [], para finalizar o fechamento ou eliminar a execução da atualidade do servidor e executar novamente a execução do serviço, resolverá o problema. se isso não funcionar para você, tente outra maneira.

Sinto muito pelo meu inglês ruim.

Developsonora tecnologa e Inno
fonte
0

Eu tive um problema por causa de ** em vez *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"
sunleo
fonte
Sim, o VS Code parece colocar automaticamente duas estrelas em vez de uma única.
Alexei
0

Eu encontrei um erro semelhante ( *ngIf) mesmo que todas as minhas importações estivessem OK e o componente tenha sido processado sem nenhum outro erro + o roteamento estava OK.

No meu caso, AppModulenão estava incluindo esse módulo específico. O estranho é que não se queixou disso, mas isso pode estar relacionado à maneira como o Ivy trabalha ng serve(tipo de carregamento de módulos de acordo com o roteamento, mas suas dependências não são consideradas).

Alexei
fonte
0

Acabei de perder ~ 1h com esse erro, em apenas uma página específica. Tentei todas as respostas aqui, mas finalmente a solução foi reconstruir tudo com ng, o problema simplesmente desapareceu ...

Elektordi
fonte
0

Então, por favor, certifique-se

  1. Nenhum erro de sintaxe nas diretivas

  2. Os módulos Browser (no App Module) e Common (em outro / filho) são importados (o mesmo que Günter Zöchbauer mencionou acima)

  3. Se você possui rotas no aplicativo, o módulo de rota deve ser importado no Módulo de Aplicativo

  4. Todo o módulo do componente roteado também é importado no App Module, por exemplo: app-routing.module.ts é o seguinte:

    rotas const: Routes = [

    {path: '', component: CustomerComponent},

    {caminho: 'admin', componente: AdminComponent}

    ];

Em seguida, o módulo App deve importar os módulos CustomerComponent e AdminComponent em @NgModule ().

Abhinav Saxena
fonte
-1

Mesmo que eu tenha enfrentado o mesmo problema, tentei todas as respostas por aqui, mas uma simples alteração me ajudou a resolver esse problema, em vez de incluir * ngFor na trtag, incluí-a na tbodytag. Espero que ajude alguém.

<tbody *ngFor="let product of products; let i=index">
        <tr >
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
            <td>{{product.description}}</td>
            <td>{{product.quantity}}</td>
            <td>
                <button type="button" >Update</button>
                <button type="button" (click)="crudService.delete(product.id)">Remove</button>
            </td>
        </tr>
    </tbody>
Surendra Mourya
fonte
-2

importar CommonModule no módulo filho e no componente

Daner
fonte