Tidak dapat mengikat ke 'ngForOf' karena ini bukan properti yang diketahui dari 'tr' (rilis final)

Saya menggunakan rilis Angular2 Final (2.1.0). Saat saya ingin menampilkan daftar perusahaan, saya mendapat error ini.

di file.component.ts:

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

di file.component.html:

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

Tambahkan BrowserModuleke imports: []dalam @NgModule()jika modul root ( AppModule), jika tidak CommonModule.

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

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

Dalam kasus saya, masalahnya adalah rekan tim saya menyebutkan *ngfordalam template, bukan *ngFor. Aneh bahwa tidak ada kesalahan yang benar untuk menangani masalah ini (In Angular 4).

Anda harus mengimpor 'CommonModule' di modul tempat Anda menggunakan arahan bawaan ini seperti ngFor, ngIf, dll.

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

Hal-hal untuk diingat:

Ketika modul khusus digunakan (modul selain AppModule) maka perlu untuk mengimpor modul umum di dalamnya.

yourmodule.module.ts

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

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

Jika Anda membuat modul Anda sendiri, tambahkan CommonModule di import di modul Anda sendiri

Ini juga bisa terjadi jika Anda tidak mendeklarasikan komponen rute dalam modul fitur Anda. Jadi contohnya:

feature.routing.module.ts:

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

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

Perhatikan ViewComponent tidak ada dalam array deklarasi, padahal seharusnya.

Modul Kustom Membutuhkan modul umum

impor {CommonModule} dari "@ angular / common";

@NgModule ({impor: [CommonModule]})

Saat menggunakan "app-routing.module" kami lupa mengimpor "CommonModule". Ingatlah untuk mengimpor!

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

Saya mengalami kesalahan yang sama tetapi saya telah mengimpor CommonModule. Sebagai gantinya saya meninggalkan koma di tempat yang tidak semestinya karena salin / tempel saat memisahkan modul:

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

app.module.ts diperbaiki dan diubah menjadi: impor BrowserModule di modul aplikasi Anda

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

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

Saya mendapatkan kesalahan yang sama, Anda dapat memperbaikinya melalui salah satu metode ini:

1. Jika Anda tidak memiliki modul bersarang

   Sebuah. Impor CommonModule di modul App Anda

   b. Impor Komponen Anda di tempat Anda menambahkan * ngFor di App Module , tentukan dalam deklarasi

// 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. Jika Anda menggunakan file modul terpisah untuk perutean, maka Impor CommonModule di modul Perutean Anda yang lain Impor CommonModule di modul Aplikasi Anda

// 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. Jika Anda memiliki modul bersarang, lakukan langkah pertama dalam modul tersebut

Dalam kasus saya, metode ke-2 menyelesaikan masalah saya.
Semoga ini bisa membantu Anda

Bagi saya masalahnya adalah bahwa saya tidak mengimpor custom made modul HouseModuledi saya app.module.ts. Saya memiliki impor lainnya.

File: app.module.ts

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

@NgModule({
  imports: [
    HouseModule
  ]
})

Pembaca Masa Depan

Periksa setiap hal berikut:

• Komponen dideklarasikan dalam TUNGGAL modul sudut
• Pastikan Anda punya import { CommonModule } from '@angular/common';
• Mulai ulang IDE / editor

Saya mulai pada proyek live dasar Angular8 mendapat masalah di atas tetapi Ketika menggunakan "app-routing.module" kami lupa mengimpor "CommonModule". Ingatlah untuk mengimpor!

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

@NgModule({
  imports: [
    CommonModule
]})

Ini akan menyelesaikan kesalahan Anda.

Masalah ini muncul ketika menggunakan Routes, kita dapat menampilkan konten statis dari setiap modul, tetapi ketika mencoba menggunakan fungsi ani seperti * ngIg tidak berfungsi, karena perlu pekerjaan seperti katakanlah @Ruben Szeker, perlu menambahkan Komponen ke app.module.ts pada impor [], untuk menyelesaikan penutupan atau mematikan eksekusi server dan mencoba kembali menjalankan servis, akan menyelesaikan masalah. jika ini tidak berhasil untuk Anda, saya akan mencoba cara lain.

Saya minta maaf atas bahasa Inggris saya yang buruk.

Saya mengalami masalah karena ** sebagai gantinya *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

Saya telah mengalami kesalahan serupa ( *ngIf) meskipun semua impor saya OK dan komponen diberikan tanpa kesalahan lain + perutean OK.

Dalam kasus saya AppModuletidak termasuk modul khusus itu. Yang aneh adalah bahwa ia tidak mengeluh tentang hal ini, tetapi ini mungkin terkait dengan cara kerja Ivy ng serve(jenis modul beban sesuai dengan perutean, tetapi ketergantungannya tidak dipertimbangkan).

Baru saja kehilangan ~ 1 jam karena kesalahan ini, hanya pada satu halaman tertentu. Mencoba semua jawaban di sini, tetapi akhirnya solusinya adalah membangun kembali semuanya dengan ng, masalahnya hilang begitu saja ...

Jadi tolong pastikan

1. Tidak ada kesalahan sintaks dalam arahan

2. Modul Browser (dalam Modul Aplikasi) dan Modul Umum (di lain / anak) diimpor (Sama dengan yang disebutkan Günter Zöchbauer di atas)

3. Jika Anda telah merutekan dalam aplikasi, modul rute harus diimpor di Modul Aplikasi

4. Semua Module komponen yang dirutekan juga diimpor dalam App Module, misalnya: app-routing.module.ts adalah sebagai berikut:

   rute const: Rute = [

   {path: '', komponen: CustomerComponent},

   {jalur: 'admin', komponen: AdminComponent}

   ];

Kemudian modul App harus mengimpor modul CustomerComponent dan AdminComponent di @NgModule ().

Meskipun saya menghadapi masalah yang sama, saya mencoba semua jawaban di sini, tetapi perubahan sederhana membantu saya menyelesaikan masalah ini, alih-alih menyertakan * ngFor dalam trtag, saya memasukkannya ke dalam tbodytag. Semoga membantu seseorang.

<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 di kedua modul anak dan komponennya