typescript - Angular ข้อผิดพลาด: "ไม่สามารถเชื่อมโยงกับ 'ngModel' ได้เนื่องจากมันไม่ใช่คุณสมบัติที่รู้จักของ 'input'"

ฉันกำลังใช้ Angular 4 และฉันกำลังได้รับข้อผิดพลาดในคอนโซล:

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

ฉันจะแก้ไขเรื่องนี้ได้อย่างไร?

คำตอบ #1

เพื่อใช้การผูกข้อมูลสองทางสำหรับอินพุตฟอร์ม คุณจำเป็นต้องนำเข้าแพ็กเกจ FormsModule ในโมดูล Angular ของคุณ

import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
         FormsModule      
    ]

แก้ไข

เนื่องจากมีคำถามซ้ำจำนวนมากที่มีปัญหาเหมือนกัน ฉันจึงกำลังปรับปรุงคำตอบนี้

มีเหตุผลสองประการที่เป็นไปได้

ขาด FormsModule ดังนั้นจึงเพิ่มสิ่งนี้ไปยังโมดูลของคุณ,
```
import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
        FormsModule      
    ]
```
ตรวจสอบไวยากรณ์/การสะกดของ [(ngModel)] ในแท็ก input

คำตอบ #2

นี่คือคำตอบที่ถูกต้อง คุณจำเป็นต้องนำเข้า FormsModule

ก่อนอื่น ใน app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule  } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule ,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ประการที่สอง ใน app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        FormsModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

คำตอบ #3

ngModel ของคุณไม่ทำงานเพราะยังไม่ได้เป็นส่วนหนึ่งของ NgModule ของคุณ

คุณต้องบอก NgModule ว่าคุณมีสิทธิ์ในการใช้ ngModel ทั่วทั้งแอปของคุณ คุณสามารถทำได้โดยการเพิ่ม FormsModule ลงใน app.module.ts -> imports -> [].

import { FormsModule } from '@angular/forms';

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })

คำตอบ #4

วิธีแก้ปัญหาที่กล่าวมาทั้งหมดนั้นถูกต้อง แต่ถ้าคุณกำลังใช้ lazy loading ต้องนำเข้า FormsModule ในโมดูลลูกที่มีฟอร์มอยู่ การเพิ่มใน app.module.ts จะไม่ช่วยอะไร

คำตอบ #5

ฉันเจอข้อผิดพลาดนี้เมื่อทดสอบแอป Angular 6 ของฉันด้วย Karma/Jasmine ฉันได้ทำการนำเข้า FormsModule ในโมดูลระดับบนของฉันแล้ว แต่เมื่อฉันเพิ่มคอมโพเนนต์ใหม่ที่ใช้ [(ngModel)] การทดสอบของฉันเริ่มล้มเหลว ในกรณีนี้ ฉันจำเป็นต้องนำเข้า FormsModule ใน TestBed TestingModule ของฉัน