ไม่สามารถผูกกับ 'ngForOf' เนื่องจากไม่ใช่คุณสมบัติที่รู้จักของ 'tr' (รุ่นสุดท้าย)

ฉันใช้ Angular2 Final release (2.1.0) เมื่อฉันต้องการแสดงรายชื่อ บริษัท ฉันพบข้อผิดพลาดนี้

ในfile.component.ts:

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

ในfile.component.html:

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

เพิ่มBrowserModuleไปimports: []ใน@NgModule()ถ้าเป็นโมดูลราก ( AppModule) CommonModuleมิฉะนั้น

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

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

ในกรณีของปัญหาคือการที่เพื่อนร่วมทีมของผมกล่าวถึงในแม่แบบแทน*ngfor *ngForแปลกที่ไม่มีข้อผิดพลาดที่ถูกต้องในการจัดการปัญหานี้ (ใน Angular 4)

คุณต้องนำเข้า 'CommonModule' ในโมดูลที่คุณใช้คำสั่งที่สร้างขึ้นเหล่านี้เช่น ngFor, ngIf เป็นต้น

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

สิ่งที่ควรจำ:

เมื่อใช้โมดูลที่กำหนดเอง (โมดูลอื่นที่ไม่ใช่ AppModule) จำเป็นต้องนำเข้าโมดูลทั่วไปในนั้น

yourmodule.module.ts

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

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

หากคุณกำลังสร้างโมดูลของคุณเองให้เพิ่ม CommonModule ในการนำเข้าในโมดูลของคุณเอง

สิ่งนี้อาจเกิดขึ้นได้หากคุณไม่ได้ประกาศส่วนประกอบเส้นทางในโมดูลคุณลักษณะของคุณ ตัวอย่างเช่น:

feature.routing.module.ts:

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

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

สังเกตว่า ViewComponent ไม่ได้อยู่ในอาร์เรย์การประกาศในขณะที่ควรจะเป็น

สำหรับฉันปัญหาคือฉันไม่ได้นำเข้าโมดูลที่กำหนดเองHouseModuleในapp.module.tsไฟล์. ฉันมีการนำเข้าอื่น ๆ

ไฟล์: app.module.ts

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

@NgModule({
  imports: [
    HouseModule
  ]
})

โมดูลที่กำหนดเองต้องการโมดูลทั่วไป

นำเข้า {CommonModule} จาก "@ angular / common";

@NgModule ({การนำเข้า: [CommonModule]})

เมื่อใช้ "app-routeing.module" เราลืมนำเข้า "CommonModule" อย่าลืมนำเข้า!

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

ฉันมีข้อผิดพลาดเดียวกัน แต่ฉันนำเข้า CommonModule แต่ฉันทิ้งลูกน้ำไว้ในที่ที่ไม่ควรเป็นเพราะการคัดลอก / วางเมื่อแยกโมดูล:

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

app.module.ts แก้ไขและเปลี่ยนเป็น: นำเข้าBrowserModuleในโมดูลแอปของคุณ

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

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

ฉันได้รับข้อผิดพลาดเดียวกันคุณสามารถแก้ไขได้ด้วยวิธีใดวิธีหนึ่งนี้:

1. หากคุณไม่มีโมดูลที่ซ้อนกัน

   ก. นำเข้าCommonModuleในโมดูลแอปของคุณ

   ข. นำเข้าคอมโพเนนต์ของคุณที่คุณกำลังเพิ่ม* ngForในโมดูลแอพกำหนดในการประกาศ

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

ค. หากคุณกำลังใช้ไฟล์โมดูลแยกต่างหากสำหรับการกำหนดเส้นทางให้นำเข้าCommonModuleในโมดูลการกำหนดเส้นทางของคุณอื่น ๆ นำเข้าCommonModuleในโมดูลแอปของคุณ

// 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. หากคุณมีโมดูลที่ซ้อนกันให้ทำขั้นตอนที่ 1 ในโมดูลนั้น

ในกรณีของฉันวิธีที่ 2 แก้ไขปัญหาของฉันได้
หวังว่านี่จะช่วยคุณได้

ผู้อ่านในอนาคต

ตรวจสอบแต่ละรายการต่อไปนี้:

• ส่วนประกอบถูกประกาศในโมดูลเชิงมุมSINGLE
• ตรวจสอบให้แน่ใจว่าคุณมี import { CommonModule } from '@angular/common';
• รีสตาร์ท IDE / เอดิเตอร์

ฉันเริ่มต้นในโครงการ Angular8 base live มีปัญหาข้างต้น แต่เมื่อใช้ "app-routeing.module" เราลืมนำเข้า "CommonModule" อย่าลืมนำเข้า!

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

@NgModule({
  imports: [
    CommonModule
]})

มันจะแก้ข้อผิดพลาดของคุณ

ฉันมีปัญหาเพราะ ** แทน *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

ฉันพบข้อผิดพลาดที่คล้ายกัน (*ngIf ) แม้ว่าการนำเข้าทั้งหมดของฉันจะใช้ได้และส่วนประกอบถูกแสดงผลโดยไม่มีข้อผิดพลาดอื่น ๆ + การกำหนดเส้นทางก็ใช้ได้

ในกรณีของฉันAppModuleไม่ได้รวมโมดูลเฉพาะนั้น สิ่งที่แปลกคือมันไม่ได้บ่นเกี่ยวกับเรื่องนี้ แต่สิ่งนี้อาจเกี่ยวข้องกับวิธีการทำงานของ Ivy ng serve(ประเภทของโมดูลโหลดตามการกำหนดเส้นทาง แต่จะไม่พิจารณาการอ้างอิง)

ดังนั้นโปรดตรวจสอบให้แน่ใจ

1. ไม่มีข้อผิดพลาดทางไวยากรณ์ในคำสั่ง

2. เบราว์เซอร์ (ในโมดูลแอป) และโมดูลทั่วไป (ในโมดูลอื่น ๆ / ลูก) ถูกนำเข้า (เช่นเดียวกับที่GünterZöchbauerกล่าวถึงข้างต้น)

3. หากคุณกำหนดเส้นทางในแอปพลิเคชันแล้วควรนำเข้าโมดูลเส้นทางในโมดูลแอป

4. โมดูลของส่วนประกอบที่กำหนดเส้นทางทั้งหมดจะถูกนำเข้าใน App Module เช่นกัน: app-Routing.module.ts มีดังนี้:

   เส้นทาง const: เส้นทาง = [

   {path: '', component: CustomerComponent},

   {path: 'admin', component: AdminComponent}

   ];

จากนั้นโมดูลแอปจะต้องนำเข้าโมดูลของ CustomerComponent และ AdminComponent ใน @NgModule ()

แม้ว่าฉันจะประสบปัญหาเดียวกันฉันก็ลองหาคำตอบทั้งหมดที่นี่ แต่การเปลี่ยนแปลงง่ายๆช่วยฉันแก้ไขปัญหานี้แทนที่จะรวม * ngFor ในtrแท็กฉันรวมไว้ในtbodyแท็ก หวังว่ามันจะช่วยใครบางคน

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