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


129

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>

9
upewnij się, że nie popełniłeś literówki, również ngforpowoduje błąd, o którym wspomniałeś. Powinno byćngFor
Piotr Kula

angular rozróżnia również wielkość liter.
Iftikhar Ali Ansari

Odpowiedzi:


243

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

2
tak, mam wiele modułów. Zapomniałem o tym. Teraz już działa :) dziękuję
Mourad Idrissi

4
Warto wspomnieć, że moduł CommonModule znajduje się w '@ angular / common', więc musisz dodać import {CommonModule} z '@
angular

4
Miałem podobny problem. moja aplikacja ma wiele modułów, instrukcję modułu importu przeglądarki należy dodać w module aplikacji iw innym module.
ssmsnet

1
Miałem wiele modułów. To uratowało mi dzień. Dzięki!
fabrykaty

1
czasami może to być zwykła literówka, ten sam błąd dzieje się podczas wykonywania „* ngFor =" pozwól pasażerowi lub pasażerom "<--- uwaga:" lub "powinno być" z ";-)
michabbb

44

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


no to mogło mnie rzucić na pętlę;)
tony09uk

1
Podobnie: napisałem *ngFor="let diagram if diagrams", zwróć uwagę na if. Lepszy byłby komunikat „błąd analizy” ...
klenium

@klenium, uratowałeś mi dzień! Otrzymałem ten błąd podczas używania tego, *ngFor="lang in languages"gdzie oczekuje kąt 8 *ngFor="let lang of languages". Dość mylący komunikat o błędzie imo: /
Jona Paulus

37

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

3
mówisz zaimportuj go do komponentu, a następnie pokaż kod importujący go do modułu
Chris - Haddox Technologies

10

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

Czy wiesz, dlaczego otrzymałem ten błąd / ostrzeżenie w przeglądarce Chrome, nawet po tym, jak mam commonModule w mojej klasie modułu podrzędnego / niestandardowego?
Ak777,

7

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


Dodanie CommonModule zadziałało dla mnie Popraw swoją odpowiedź. Podziel się również krokami
Ashish Yadav

5

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.


Dzięki stary, to nie był mój problem, ale dał mi wskazówkę i bingo, mój problem został rozwiązany !!
Abhinav Saxena

1

Moduł niestandardowy Wymaga wspólnego modułu

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

@NgModule ({import: [CommonModule]})


1

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

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

1

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

1

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

1

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


1

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

1

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

0

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.


0

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.


0

Miałem problem z powodu ** zamiast *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

Tak, VS Code wydaje się automatycznie umieszczać dwie gwiazdki zamiast jednej.
Aleksiej

0

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


0

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


0

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


-1

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>

-2

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.