Không thể liên kết với 'ngForOf' vì nó không phải là thuộc tính đã biết của 'tr' (bản phát hành cuối cùng)

Tôi đang sử dụng bản phát hành Angular2 Final (2.1.0). Khi tôi muốn hiển thị danh sách các công ty, tôi gặp lỗi này.

trong file.component.ts:

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

trong file.component.html:

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

Thêm BrowserModulevào imports: []trong @NgModule()nếu đó là mô-đun root ( AppModule), nếu không thì CommonModule.

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

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

Trong trường hợp của tôi, vấn đề là đồng đội của tôi đã đề cập *ngfortrong các mẫu thay vì *ngFor. Kỳ lạ là không có lỗi chính xác để xử lý vấn đề này (Trong Angular 4).

Bạn phải nhập 'CommonModule' trong mô-đun nơi bạn đang sử dụng các chỉ thị tích hợp này như ngFor, ngIf, v.v.

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

Những điều cần nhớ:

Khi các mô-đun tùy chỉnh được sử dụng (các mô-đun khác với AppModule) thì cần phải nhập mô-đun chung trong đó.

yourmodule.module.ts

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

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

Nếu bạn đang tạo mô-đun của riêng mình thì hãy thêm CommonModule vào phần nhập trong mô-đun của riêng bạn

Điều này cũng có thể xảy ra nếu bạn không khai báo một thành phần định tuyến trong mô-đun tính năng của mình. Ví dụ:

feature.routing.module.ts:

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

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

Lưu ý rằng ViewComponent không có trong mảng khai báo, ngược lại thì phải.

Mô-đun tùy chỉnh Cần mô-đun chung

nhập {CommonModule} từ "@ angle / common";

@NgModule ({nhập: [CommonModule]})

Khi sử dụng "app-routing.module", chúng ta quên nhập "CommonModule". Nhớ nhập!

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

Tôi đã gặp lỗi tương tự nhưng tôi đã nhập CommonModule. Thay vào đó, tôi đã để lại dấu phẩy ở nơi không nên vì sao chép / dán khi chia mô-đun:

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

app.module.ts đã sửa và thay đổi thành: nhập BrowserModule trong mô-đun ứng dụng của bạn

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

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

Tôi cũng gặp lỗi tương tự, Bạn có thể khắc phục bằng một trong các phương pháp sau:

1. Nếu bạn không có bất kỳ mô-đun lồng nhau nào

   a. Nhập CommonModule trong mô-đun Ứng dụng

   b. Nhập Thành phần của bạn nơi bạn đang thêm * ngFor trong Mô-đun ứng dụng , xác định trong khai báo

// 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. Nếu bạn đang sử dụng tệp mô-đun riêng biệt để định tuyến thì Nhập CommonModule trong mô-đun Định tuyến của bạn nếu không thì Nhập CommonModule trong mô-đun Ứng dụng của bạn

// 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. Nếu bạn có mô-đun lồng nhau thì hãy thực hiện bước đầu tiên trong mô-đun cụ thể đó

Trong trường hợp của tôi, phương pháp thứ 2 đã giải quyết được vấn đề của tôi.
Hy vọng điều này sẽ giúp bạn

Đối với tôi, vấn đề là tôi đã không nhập mô-đun được tạo tùy chỉnh HouseModule trong của tôi app.module.ts. Tôi đã có hàng nhập khẩu khác.

Tệp: app.module.ts

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

@NgModule({
  imports: [
    HouseModule
  ]
})

Độc giả tương lai

Kiểm tra từng điều sau:

• Thành phần được khai báo trong một SINGLE mô-đun góc
• Hãy chắc chắn rằng bạn có import { CommonModule } from '@angular/common';
• Khởi động lại IDE / trình chỉnh sửa

Tôi đã bắt đầu dự án trực tiếp cơ sở Angular8 gặp sự cố ở trên nhưng Khi sử dụng "app-routing.module", chúng tôi quên nhập "CommonModule". Nhớ nhập!

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

@NgModule({
  imports: [
    CommonModule
]})

Nó sẽ giải quyết lỗi của bạn.

Có vấn đề xuất hiện khi sử dụng Routes, chúng tôi có thể hiển thị nội dung tĩnh của bất kỳ mô-đun nào, nhưng khi thử sử dụng chức năng ani như * ngIg thì không hoạt động, vì công việc cần phải nói như @Ruben Szeker, cần thêm Thành phần vào app.module.ts trên import [], để hoàn tất việc thực thi đóng hoặc ngắt thực tế của máy chủ và thử chạy lại lần phục vụ, sẽ giải quyết được vấn đề. nếu điều này không hiệu quả với bạn, tôi hãy thử cách khác.

Tôi xin lỗi vì tiếng anh kém của tôi.

Tôi đã gặp sự cố vì ** thay vào đó *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

Tôi đã gặp một lỗi tương tự (*ngIf ) ngay cả khi tất cả các lần nhập của tôi đều OK và thành phần được hiển thị mà không có bất kỳ lỗi nào khác + định tuyến vẫn ổn.

Trong trường hợp của tôi AppModulekhông bao gồm mô-đun cụ thể đó. Điều kỳ lạ là nó không phàn nàn về điều này, nhưng điều này có thể liên quan đến cách Ivy hoạt động với ng serve(loại tải các mô-đun theo định tuyến, nhưng các phụ thuộc của nó không được xem xét).

Chỉ mất ~ 1h cho lỗi này, chỉ trên một trang cụ thể. Đã thử tất cả các câu trả lời ở đây, nhưng cuối cùng giải pháp là xây dựng lại toàn bộ với ng, vấn đề chỉ biến mất ...

Vì vậy, hãy chắc chắn rằng

1. Không có lỗi cú pháp trong lệnh

2. Mô-đun Trình duyệt (trong Mô-đun ứng dụng) và Mô-đun Chung (trong khác / con) được nhập (Giống như những gì Günter Zöchbauer đã đề cập ở trên)

3. Nếu bạn đã định tuyến trong ứng dụng thì mô-đun định tuyến sẽ được nhập vào Mô-đun ứng dụng

4. Tất cả Mô-đun của thành phần được định tuyến cũng được nhập trong Mô-đun ứng dụng, ví dụ: app-routing.module.ts như sau:

   const route: Routes = [

   {path: '', component: CustomerComponent},

   {path: 'admin', component: AdminComponent}

   ];

Sau đó, mô-đun Ứng dụng phải nhập các mô-đun của CustomerComponent và AdminComponent trong @NgModule ().

Ngay cả khi tôi gặp phải vấn đề tương tự, tôi đã thử tất cả các câu trả lời ở đây, nhưng một thay đổi đơn giản đã giúp tôi giải quyết vấn đề này, thay vì đưa * ngFor vào trthẻ, tôi đã đưa nó vào tbodythẻ. Hy vọng nó sẽ giúp một ai đó.

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

nhập CommonModule trong cả mô-đun con và thành phần