我是 Angular 的新手,我正在尝试绑定由模型对象中的文本框组成的表单。但我收到一个错误,如“未处理的承诺拒绝:模板解析错误:无法绑定到‘NgModel’,因为它不是‘输入’的已知属性”
我在谷歌上投入了大量时间,但问题仍然存在
下面是我的代码。
html:
<div>
<div class="col-sm-6 form-group">
<label class="control-label">Project Name:</label>
<input type="text" class="form-control" id="txtProjName" [(NgModel)]="projectFieldsdtl.PROJECT_NAME" >
</div>
<div class="col-sm-6 form-group">
<label class="control-label">Project Manager Name:</label>
<input type="text" class="form-control" id="txtProjManager" >
</div>
<div class="col-sm-6 form-group">
<label class="control-label">Project Manager Email ID:</label>
<input type="text" class="form-control" id="txtProjManagerMailID" >
</div>
</div>
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule} from '@angular/forms';
import { HttpModule } from '@angular/http';
import {SpotCheckStatusComponent} from './spotcheckstatus.component';
@NgModule({
imports: [ BrowserModule ,FormsModule,HttpModule ],
declarations: [ AppComponent,SpotCheckStatusComponent ],
bootstrap: [ SpotCheckStatusComponent ]
})
export class AppModule { }
projectFields.ts
export class projectFields {
public PROJECT_CODE:string;
public PROJECT_NAME:string
public PROJECT_MANAGER: string;
public PROJECT_MANAGER_EMAIL_ID: string;
}
SpotCheckStatusComponent.ts
import {Component,OnInit ,OnChanges} from '@angular/core';
import {IMyDpOptions} from 'mydatepicker';
import {HttpService} from './http.service';
import { serviceLine } from './models/serviceLine';
import { projectFields } from './models/projectFields';
@Component({
selector: 'my-app',
styleUrls:['/css/home.css'],
templateUrl:'./SpotCheckStatus.html',
providers:[HttpService]
})
export class SpotCheckStatusComponent implements OnInit
{
name = 'SpotCheckStatus';
public projectFieldsdtl: projectFields[];
constructor(
private httpService: HttpService
) {}
ngOnInit(){
this.httpService.getProjectCode(serviceline).subscribe(
response=> {
this.projectFieldsdtl=response[0];
},
error=> {
console.log("ERROR: ",error);
console.log(error.json()); //gives the object object
},
() => {
console.log("Completed");
}
);
}
}
最后 projectFieldsdtl 得到了如下对象:
[{
PROJECT_CODE:"9999"
PROJECT_MANAGER:"shekat"
PROJECT_MANAGER_EMAIL_ID:"[email protected]"
PROJECT_NAME:"ABFL"
}]
您错过了 ngmodel 中的双引号。
<input type="text" class="form-control" id="txtProjName" [(ngModel)]="projectFieldsdtl.PROJECT_NAME" >
您也在 ng-model 中使用 Array 对象。所以它应该像projectFieldsdtl[0].PROJECT_NAME
而不是projectFieldsdtl.PROJECT_NAME
.
由于服务 anc 调用。在你的 div 标签上试试这个 *ngIf="projectFieldsdtl != null"
<div class="col-sm-6 form-group" *ngIf="projectFieldsdtl != null && projectFieldsdtl != undefined">
<label class="control-label">Project Name:</label>
<input type="text" class="form-control" id="txtProjName" [(NgModel)]="projectFieldsdtl[0].PROJECT_NAME" >
</div>
你应该在nginit函数中初始化一个空对象,试试下面的代码
ngOnInit(){
this.projectFieldsdtl=[{
PROJECT_CODE:""
PROJECT_MANAGER:""
PROJECT_MANAGER_EMAIL_ID:""
PROJECT_NAME:""
}];
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句