我是Angular的新手,我正在尝试绑定由模型对象的文本框组成的表单 . 但我收到一个错误,如“Unhandled Promise rejection:模板解析错误:无法绑定到'NgModel',因为它不是'input'的已知属性”
我在谷歌投入了大量时间,但仍存在问题
以下是我的代码 .
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:"teja.ravi@gmal.com"
PROJECT_NAME:"ABFL"
}]
3 回答
您在ngmodel中错过了双引号 .
编辑
您还在ng-model中使用Array对象 . 所以它应该像
projectFieldsdtl[0].PROJECT_NAME
而不是projectFieldsdtl.PROJECT_NAME
.因为服务异步调用 . 在你的div标签上试试这个* ngIf =“projectFieldsdtl!= null”
你应该在nginit函数中初始化一个空对象,试试下面的代码
ngModel
区分大小写,所以你应该放[(ngModel)]
而不是[(ngmodel)]
.你的第二个问题是当你收到
undefined
模型时,它是由于projectFieldsdtl
未定义或包含null
值 .在你的
JS contructor()
中考虑将projectFieldsdtl
初始化为对象 .希望有所帮助
既然您从服务中获取数组,您可以执行如下操作[(ngModel)]