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


129

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>

9
assicurati di non aver fatto anche un errore di battitura ngfordà l'errore che hai menzionato. Dovrebbe esserengFor
Piotr Kula

angolare fa anche distinzione tra maiuscole e minuscole.
Iftikhar Ali Ansari,

Risposte:


241

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

2
sì, ho più moduli. L'ho dimenticato. Ora funziona :) grazie
Mourad Idrissi

4
Potrebbe valere la pena ricordare che CommonModule si trova in "@ angular / common", quindi assicurati di aggiungere import {CommonModule} da "@
angular

4
Ho avuto un problema simile. la mia app ha più moduli, l'istruzione import Browser module deve essere aggiunta nel modulo app e in un altro modulo.
ssmsnet

1
Avevo più moduli. Mi ha salvato la giornata. Grazie!
fabricioflores

1
a volte può essere un semplice errore di battitura, lo stesso errore si verifica quando si esegue "* ngFor =" let passeggero o passeggeri "<--- notice:" o "should be" of ";-)
michabbb

44

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


beh, questo avrebbe potuto farmi un giro;)
tony09uk

1
Simile: ho scritto *ngFor="let diagram if diagrams", nota il file if. Un messaggio di "errore di analisi" sarebbe meglio ...
klenium

@klenium, mi hai salvato la giornata! ho ricevuto quell'errore quando uso *ngFor="lang in languages"dove si aspetta l'8 angolare *ngFor="let lang of languages". Messaggio di errore piuttosto fuorviante imo: /
Jona Paulus

37

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

3
dici importalo nel componente, quindi mostra il codice che lo importa nel modulo
Chris - Haddox Technologies

10

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: []
})

Sai perché dovrei ricevere quell'errore / avviso in realtà in Chrome anche dopo che ho il commonModule sulla mia classe di modulo figlio / personalizzato?
Ak777

7

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


L'aggiunta di CommonModule ha funzionato per me. Migliora la tua risposta. Condividi anche i passaggi
Ashish Yadav

5

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.


Grazie amico, questo non era il mio problema ma mi ha dato un suggerimento e il bingo, il mio problema è risolto !!
Abhinav Saxena

1

Modulo personalizzato Richiede un modulo comune

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

@NgModule ({imports: [CommonModule]})


1

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

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

1

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

1

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

1

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]
})
  1. 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


1

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

1

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

0

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.


0

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.


0

Ho avuto un problema a causa di ** invece *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

Sì, VS Code sembra mettere automaticamente due stelle invece di una singola.
Alexei

0

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


0

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


0

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 ().


-1

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>

-2

importa CommonModule sia nel modulo figlio che nel componente

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.