Angular ngModel没有';t在mat select中显示对象的值
我有一个公司类,它有一个总部地址字段。地址是一个接口,它有另一个对象,国家,这是另一个接口。 在我的数据库中,我存储了所有的国家。我有一个编辑所选公司的视图,在那里我可以设置或更改总部地址,并且我为以下国家创建了一个mat select:Angular ngModel没有';t在mat select中显示对象的值,angular,angular5,angular2-forms,angular4-forms,Angular,Angular5,Angular2 Forms,Angular4 Forms,我有一个公司类,它有一个总部地址字段。地址是一个接口,它有另一个对象,国家,这是另一个接口。 在我的数据库中,我存储了所有的国家。我有一个编辑所选公司的视图,在那里我可以设置或更改总部地址,并且我为以下国家创建了一个mat select: <mat-select [(ngModel)]="company.headquarter.country"> <mat-option *ngFor="let country of companyService.countries" [
<mat-select [(ngModel)]="company.headquarter.country">
<mat-option *ngFor="let country of companyService.countries" [value]="country">
{{country.name}}
</mat-option>
</mat-select>
{{country.name}
此代码将所选国家/地区保存到总部的“国家/地区”字段,但如果我要编辑同一家公司,则mat select不会显示实际值。我怎样才能解决这个问题
编辑:
<mat-form-field>
<mat-select [(value)]="contract.company"
panelClass="example-panel-dark-blue"
[compareWith]="helper.compareById">
<mat-option *ngFor="let cust of customers"
[value]="cust"> {{cust.title}}
</mat-option>
</mat-select>
</mat-form-field>
compareById(f1: Common.Item, f2: Common.Item): boolean {
return f1 && f2 && f1.id === f2.id;
}
如果我将ngModel更改为company.headery.country.id,将[value]更改为country.id,那么它可以正常工作,但要存储国家的代码或名称,我必须编写一个方法,该方法将根据companyService.countries数组中的id查找国家,并将该国家设置为company.headery.country字段。因此,这不是一个好的解决方案。将[(ngModel)]
更改为[(值)]
{{country.name}
此代码将所选国家/地区保存到总部所在国家/地区
字段,但如果要编辑同一公司,则mat select不会进行编辑
显示实际值。我怎样才能解决这个问题
问题是,当您对两个对象进行mat select比较时,它们的引用可能不同。使用比较功能
通过一些标记(如id
)比较对象
要自定义默认选项比较算法,
支持与输入进行比较compareWith
采用一个具有两个
参数:选项1和选项2。如果给出了与的比较,则为
通过函数的返回值选择选项
模板:
<mat-form-field>
<mat-select [(value)]="contract.company"
panelClass="example-panel-dark-blue"
[compareWith]="helper.compareById">
<mat-option *ngFor="let cust of customers"
[value]="cust"> {{cust.title}}
</mat-option>
</mat-select>
</mat-form-field>
compareById(f1: Common.Item, f2: Common.Item): boolean {
return f1 && f2 && f1.id === f2.id;
}
这是变更检测问题吗?您的主要组件是OnPush检测策略?如果是,请检查相同的问题。使用此解决方案,将国家/地区保存到公司。总部。国家/地区正在工作,但当我要编辑时,mat select不显示当前值。您的mat select是否在mat form字段中?是的,它在mat form字段中。链接不起作用!这也可能是一个对象标识问题。记住,在js中{hello:'world'}!=={hello:'world}所以我建议将select绑定到标量值。酷!很乐意帮忙