如何解决无法绑定到 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 { }
解决方法
- 您不想在组件中导入模块。
因此从组件中删除它:
import {FormsModule} from "@angular/forms";
- 确保将 CustomerModule 导入您的 AppModule。
如果这有帮助,请告诉我。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。