Impossibile eseguire il binding a "ngForOf" poiché non è una proprietà nota di "tr" (versione finale)

Sto usando la versione finale di Angular2 (2.1.0). Quando desidero visualizzare un elenco di società, ho ricevuto questo errore.

in file.component.ts:

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

in file.component.html:

<tbody>
  <tr *ngFor="let item of companies; let i =index">
     <td>{{i}}</td>
     <td>{{item.name}}</td>
  </tr>
</tbody>

Aggiungere BrowserModulea imports: []in @NgModule()se è il modulo principale ( AppModule), altrimenti il CommonModule.

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

import { BrowserModule } from '@angular/platform-browser'
..
..
@NgModule({
  imports: [BrowserModule, /* or CommonModule */],
  ..
})

Nel mio caso, il problema era che il mio compagno di squadra menzionava *ngfornei modelli invece di *ngFor. Strano che non ci sia un errore corretto per gestire questo problema (in Angular 4).

Devi importare 'CommonModule' nel modulo in cui stai usando queste direttive integrate come ngFor, ngIf ecc.

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

Cose da ricordare:

Quando vengono utilizzati moduli personalizzati (moduli diversi da AppModule), è necessario importare il modulo comune al suo interno.

yourmodule.module.ts

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

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

Se stai creando il tuo modulo, aggiungi CommonModule nelle importazioni nel tuo modulo

Ciò può accadere anche se non dichiari un componente di route nel modulo delle funzionalità. Quindi per esempio:

feature.routing.module.ts:

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

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

Si noti che ViewComponent non è nell'array delle dichiarazioni, mentre dovrebbe esserlo.

Modulo personalizzato Richiede un modulo comune

importa {CommonModule} da "@ angular / common";

@NgModule ({imports: [CommonModule]})

Quando si usa "app-routing.module" si dimentica l'importazione di "CommonModule". Ricordati di importare!

import { CommonModule } from "@angular/common";
@NgModule({  imports: [ CommonModule]})

Ho avuto lo stesso errore ma avevo importato CommonModule. Invece ho lasciato una virgola dove non dovrebbe essere a causa del copia / incolla durante la divisione di un modulo:

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

app.module.ts corretto e modificato in: importa il BrowserModule nel modulo dell'app

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

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

Stavo ricevendo lo stesso errore, puoi correggere tramite uno di questo metodo:

1. Se non hai alcun modulo nidificato

   un. Importa CommonModule nel modulo dell'app

   b. Importa il tuo componente in cui stai aggiungendo * ngFor nel modulo App , definisci nelle dichiarazioni

// 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 stai utilizzando il file del modulo separato per il routing, importa il CommonModule nel tuo modulo di routing, altrimenti importa il CommonModule nel modulo dell'app

// 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]
})

2. Se hai un modulo nidificato, esegui il primo passaggio in quel particolare modulo

Nel mio caso, il secondo metodo ha risolto il mio problema.
Spero che questo ti possa aiutare

Per me il problema era che non avevo importato il modulo personalizzato HouseModulenel mio file app.module.ts. Ho avuto le altre importazioni.

File: app.module.ts

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

@NgModule({
  imports: [
    HouseModule
  ]
})

Futuri lettori

Controlla ciascuno dei seguenti:

• Il componente è dichiarato in un SINGOLO modulo angolare
• Assicurati di avere import { CommonModule } from '@angular/common';
• Riavvia l'IDE / editor

Ho iniziato con il progetto live di base Angular8 ottenuto il problema di cui sopra, ma quando si usa "app-routing.module" dimentichiamo l'importazione "CommonModule". Ricordati di importare!

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

@NgModule({
  imports: [
    CommonModule
]})

Risolverà il tuo errore.

Questo problema si verifica quando si utilizzano le rotte, possiamo visualizzare il contenuto statico di qualsiasi modulo, ma quando si tenta di utilizzare una funzionalità come * ngIg non funziona, per il lavoro è necessario dire @Ruben Szeker, è necessario aggiungere Component in app.module.ts on imports [], per terminare la chiusura o terminare l'esecuzione del server e riprovare a eseguire il servizio, risolverà il problema. se questo non funziona per te, prova in un altro modo.

Mi dispiace per il mio cattivo inglese.

Ho avuto un problema a causa di ** invece *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

Ho riscontrato un errore simile ( *ngIf) anche se tutte le mie importazioni erano OK e il componente è stato renderizzato senza altri errori + il routing era OK.

Nel mio caso AppModulenon includeva quel modulo specifico. La cosa strana è che non si è lamentato di questo, ma questo potrebbe essere correlato al modo in cui Ivy lavora ng serve(tipo di moduli di caricamento in base al routing, ma le sue dipendenze non sono considerate).

Ho appena perso ~ 1 ora su questo errore, su una sola pagina specifica. Ho provato tutte le risposte qui, ma alla fine la soluzione è stata ricostruire il tutto con ng, il problema è semplicemente scomparso ...

Quindi assicurati

1. Nessun errore di sintassi nelle direttive

2. I moduli browser (nel modulo app) e comuni (in altro / figlio) vengono importati (lo stesso di Günter Zöchbauer menzionato sopra)

3. Se hai percorsi nell'applicazione, il modulo del percorso dovrebbe essere importato nel modulo dell'app

4. Tutti i moduli del componente instradato vengono importati anche in App Module, ad esempio: app-routing.module.ts è il seguente:

   route const: Routes = [

   {percorso: "", componente: CustomerComponent},

   {percorso: "admin", componente: AdminComponent}

   ];

Quindi il modulo App deve importare i moduli di CustomerComponent e AdminComponent in @NgModule ().

Anche se ho affrontato lo stesso problema, ho provato tutte le risposte qui, ma una semplice modifica mi ha aiutato a risolvere questo problema, invece di includere * ngFor nel trtag, l'ho incluso nel tbodytag. Spero che aiuti qualcuno.

<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>

importa CommonModule sia nel modulo figlio che nel componente