我有一个select下拉列表,它需要预先填充对象数组。但是,ngModel并不绑定数据。我试着用更简单的方式演示它,但实际上,我有一个主页,当我从主页导航到联系人页面时,我需要填充表单数据。如果我直接进入联系人页面,表单必须为空。
在下面的示例中,为了简单起见,我在页面加载时填充数据,但我面临的问题类似于我之前的示例,select的ngModel没有使用来自JSON的数据进行更新。
组件:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
adViewList: AdViewModel = new AdViewModel();
callListType = [
{
callType: {
'id': 1,
'description': 'description1',
}
},
{
callType: {
'id': 2,
'description': 'description2',
},
}
]
compareByOptionId(idFist, idSecond) {
return idFist && idSecond && idFist.callType.description === idSecond;
}
prepopulateData = {
inciNum: "12365",
callType: {
'id': 2,
'description': 'description2',
}
}
ngOnInit() { // on page load
const someDate:any = this.prepopulateData;
this.adViewList = someDate
}
}
export class AdViewModel {
inciNum: string;
callType = Availability;
}
export class Availability {
id: string;
description: string;
}
HTML:
<input type="text" id="inputcomplaint" aria-describedby="complaintHelp"
autocomplete="new-password" name="complaint"
[(ngModel)]="adViewList.inciNum" #complaint="ngModel">
<select [(ngModel)]="adViewList.callType.description"
[compareWith]="compareByOptionId">
<option style="display:none"></option>
<option *ngFor="let data of callListType" [ngValue]="data">
{{data.callType.description}} </option>
</select>
发布于 2019-01-04 03:38:54
我测试了以下内容,它似乎起作用了。请注意变化。我映射的是[(ngModel)]="adViewList.callType"
而不是[(ngModel)]="adViewList"
,因为callListType
是callType
而不是AdViewModel
的列表
另请注意,我正在打印<p> List: {{adViewList | json}} </p>
以检查模型是否正在更新,并且它似乎正在从所选内容中获取值。
更新:要让默认值按照您拥有的onNgInit()显示,您需要将ngValue
更改为[ngValue]="data.callType"
,并且compare函数需要检查ids,而不是对象。请参阅下面的代码。
试试这个:在你的模板中:
<select name="select" [(ngModel)]="adViewList.callType"
[compareWith]="compareByOptionId">
<option style="display:none"></option>
<option *ngFor="let data of callListType" [ngValue]="data.callType">
{{data.callType.description}} </option>
</select>
在组件中:
compareByOptionId(idFist, idSecond) {
return idFist.id === idSecond.id
}
PS:对不起,我没有stackblitz id来分享我测试的东西,我只是编辑了你的文件来测试。
https://stackoverflow.com/questions/54028056
复制相似问题