Nie można powiązać z „ngForOf”, ponieważ nie jest to znana właściwość „tr” (wersja ostateczna)

Używam wersji końcowej Angular2 (2.1.0). Kiedy chcę wyświetlić listę firm, pojawia się ten błąd.

w file.component.ts:

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

w file.component.html:

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

Dodaj BrowserModuledo imports: []się @NgModule(), czy jest to moduł główny ( AppModule), w przeciwnym razie CommonModule.

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

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

W moim przypadku problem polegał na tym, że mój kolega z zespołu wspomniał *ngforw szablonach zamiast *ngFor. Dziwne, że nie ma poprawnego błędu do rozwiązania tego problemu (w Angular 4).

Musisz zaimportować `` CommonModule '' do modułu, w którym używasz tych wbudowanych dyrektyw, takich jak ngFor, ngIf itp.

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

Rzeczy do zapamiętania:

W przypadku korzystania z modułów niestandardowych (modułów innych niż AppModule) konieczne jest zaimportowanie do niego modułu wspólnego.

yourmodule.module.ts

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

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

Jeśli tworzysz własny moduł, dodaj CommonModule do importu w swoim własnym module

Może się to również zdarzyć, jeśli nie zadeklarujesz komponentu trasy w swoim module funkcji. Na przykład:

feature.routing.module.ts:

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

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

Zauważ, że ViewComponent nie znajduje się w tablicy deklaracji, a powinno.

Moduł niestandardowy Wymaga wspólnego modułu

importuj {CommonModule} z "@ angular / common";

@NgModule ({import: [CommonModule]})

Używając „app-routing.module”, zapominamy o imporcie „CommonModule”. Pamiętaj o imporcie!

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

Miałem ten sam błąd, ale miałem CommonModule importowane. Zamiast tego zostawiłem przecinek tam, gdzie nie powinno być z powodu kopiowania / wklejania podczas dzielenia modułu:

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

app.module.ts naprawiono i zmieniono na: zaimportuj BrowserModule do modułu aplikacji

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

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

Otrzymałem ten sam błąd, możesz naprawić jedną z tych metod:

1. Jeśli nie masz żadnego zagnieżdżonego modułu

   za. Zaimportuj CommonModule do modułu aplikacji

   b. Zaimportuj komponent w miejscu, w którym dodajesz * ngFor w module aplikacji , zdefiniuj w deklaracjach

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

do. Jeśli używasz oddzielnego pliku modułu do routingu, zaimportuj CommonModule do modułu routingu w innym przypadku Importuj CommonModule do modułu aplikacji

// 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. Jeśli masz zagnieżdżony moduł, wykonaj pierwszy krok w tym konkretnym module

W moim przypadku druga metoda rozwiązała mój problem.
Mam nadzieję, że to ci pomoże

U mnie problem polegał na tym, że nie zaimportowałem niestandardowego modułu HouseModuledo pliku app.module.ts. Miałem inne importy.

Plik: app.module.ts

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

@NgModule({
  imports: [
    HouseModule
  ]
})

Przyszli czytelnicy

Sprawdź wszystkie z poniższych:

• Komponent jest deklarowany w POJEDYNCZYM module kątowym
• Upewnij się że masz import { CommonModule } from '@angular/common';
• Zrestartuj IDE / edytor

Zacząłem od podstawowego projektu na żywo w Angular8, który napotkał powyższy problem, ale kiedy używam "app-routing.module", zapominamy o imporcie "CommonModule". Pamiętaj o imporcie!

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

@NgModule({
  imports: [
    CommonModule
]})

To rozwiąże twój błąd.

Ten problem pojawia się podczas korzystania z tras, możemy wyświetlić statyczną zawartość dowolnego modułu, ale podczas próby użycia funkcji ani, takiej jak * ngIg, nie działa, ponieważ potrzeba pracy, powiedzmy @Ruben Szeker, trzeba dodać komponent do app.module.ts w przypadku importu [], aby zakończyć, zamknij lub zabij aktualność serwera wykonywania i ponów próbę uruchomienia usługi, rozwiąże problem. jeśli to nie zadziała, spróbuj innego sposobu.

Przepraszam za mój zły angielski.

Miałem problem z powodu ** zamiast *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

Napotkałem podobny błąd (*ngIf ), nawet jeśli wszystkie moje importy były OK, a komponent został wyrenderowany bez żadnego innego błędu + routing był OK.

W moim przypadku AppModulenie zawierał tego konkretnego modułu. Dziwne jest to, że nie narzekał na to, ale może to być związane z tym, jak działa Ivy ng serve(rodzaj ładuje moduły zgodnie z routingiem, ale jego zależności nie są brane pod uwagę).

Właśnie straciłem ~ 1 godzinę z powodu tego błędu, tylko na jednej określonej stronie. Wypróbowałem wszystkie odpowiedzi tutaj, ale ostatecznie rozwiązaniem było odbudowanie całości za pomocą ng, problem po prostu zniknął ...

Więc proszę się upewnić

1. Brak błędów składniowych w dyrektywach

2. Importowane są moduły przeglądarki (w module aplikacji) i wspólne (w innych / podrzędnych) (to samo, co Günter Zöchbauer wspomniał powyżej)

3. Jeśli masz trasy w aplikacji, moduł tras powinien zostać zaimportowany do modułu aplikacji

4. Wszystkie moduły komponentu kierowanego są również importowane do modułu aplikacji, na przykład: app-routing.module.ts jest w następujący sposób:

   stałe trasy: Routes = [

   {ścieżka: '', komponent: CustomerComponent},

   {ścieżka: 'admin', komponent: AdminComponent}

   ];

Następnie moduł aplikacji musi importować moduły CustomerComponent i AdminComponent w @NgModule ().

Nawet ja napotkałem ten sam problem, wypróbowałem wszystkie odpowiedzi tutaj, ale prosta zmiana pomogła mi rozwiązać ten problem, zamiast uwzględniać * ngFor w trtagu, umieściłem go w tbodytagu. Mam nadzieję, że to komuś pomoże.

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

import CommonModule zarówno do modułu podrzędnego, jak i do komponentu