无法绑定到 ngModel，因为它不是输入错误的已知属性

问题描述

我在 module.ts 中导入了 FormsModule，但编译仍然失败并出现错误 - 无法绑定到“ngModel”，因为它不是输入的已知属性。

注意：我在为项目中的每个组件创建单独的模块后遇到了错误。最初用单个 module.ts 没有错误

我是 angular 的初学者，在这里找不到问题，任何帮助将不胜感激。

组件代码：

    import { Component } from '@angular/core';
    import{Customer}from"./CustomerApp.model";
    import {FormsModule} from "@angular/forms";
    @Component({
      templateUrl: './CustomerApp.CustomerView.html'
      //styleUrls: ['./app.component.css']
    })
    export class CustomerComponent {
      title = 'custApp';
      CustomerModel:Customer =new Customer();
      CustomerModels:Array<Customer> = new Array<Customer>();
      Add(){
    this.CustomerModels.push(this.CustomerModel);
    this.CustomerModel = new Customer(); //clear Ui
      }
    }

CustomerModule.ts -

    import { CommonModule } from '@angular/common';
    import { NgModule } from '@angular/core';
    import {RouterModule} from "@angular/router";
    import { MainRoutes } from '../Routing/CustomerApp.MainRouting';
    import { CustomerComponent } from './CustomerApp.CustomerComponent';
    import {FormsModule} from "@angular/forms";
    @NgModule({
      declarations: [
         CustomerComponent
      ],imports: [
        RouterModule.forRoot(MainRoutes),CommonModule,FormsModule
      ],providers: [],bootstrap: [CustomerComponent]
    })
    export class CustomerModule { }

main.ts

    import { enableProdMode } from '@angular/core';
    import { platformbrowserDynamic } from '@angular/platform-browser-dynamic';
    
    import { MainModule } from './CustomerApp/Home/CustomerApp.MainModule';
    import { environment } from './environments/environment';
    
    if (environment.production) {
      enableProdMode();
    }
    
    platformbrowserDynamic().bootstrapModule(MainModule)
      .catch(err => console.log(err));

CustomerView.html

Customer Code:

<input [(ngModel)] ="CustomerModel.CustomerCode" type="text"/><br/>
    Customer Name: <input [(ngModel)] ="CustomerModel.CustomerName"  type ="text"/><br/>
    Customer Amount: <input [(ngModel)] ="CustomerModel.CustomerAmount"  type="number"/><br/>
    <input (click) = "Add()" type =button value="Add"/><br/>
    
    {{CustomerModel.CustomerCode}}<br/>
    {{CustomerModel.CustomerName}}<br/>
    {{CustomerModel.CustomerAmount}}<br/>
    
    <table>
        <tr>
            <td>Customer Code</td>
            <td>Customer Name</td>
            <td>Customer Amount</td>
        </tr>
        <tr *ngFor ="let cust of CustomerModels">
            <td>{{cust.CustomerCode}}</td>
            <td>{{cust.CustomerName}}</td>
            <td>{{cust.CustomerAmount}}</td>
        </tr>
    </table>

model.ts

    export class Customer{
        CustomerCode:string="";
        CustomerName:string="";
        CustomerAmount:number=0;
    }

项目文件夹结构如下 -

错误截图 -

-- 编辑 - 添加了其他 2 个 module.ts 文件 -

CustomerApp.MainModule.ts

    import { browserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import {RouterModule} from "@angular/router";
    import { MasterPageComponent } from './CustomerApp.MasterPageComponent';
    import { HomeComponent } from './CustomerApp.HomeComponent';
    import { MainRoutes } from '../Routing/CustomerApp.MainRouting';
    @NgModule({
      declarations: [
          MasterPageComponent,HomeComponent
      ],browserModule
      ],bootstrap: [MasterPageComponent]
    })
    export class MainModule { }

CustomerApp.supplierModule.ts

    import { CommonModule } from '@angular/common';
    import { NgModule } from '@angular/core';
    import {RouterModule} from "@angular/router";
    import { MainRoutes } from '../Routing/CustomerApp.MainRouting';
    import { supplierComponent } from './CustomerApp.supplierComponent';
    //import { supplierRoutes } from '../Routing/CustomerApp.suplierRouting';
    
    @NgModule({
      declarations: [
          supplierComponent
      ],CommonModule
      ],bootstrap: [supplierComponent]
    })
    export class supplierModule { }

解决方法

1. 您不想在组件中导入模块。

因此从组件中删除它：

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

2. 确保将 CustomerModule 导入您的 AppModule。

如果这有帮助，请告诉我。