[英]How to reset search input value after close mat-select-filter drop-down in Angular?
[英]Value is not binding in mat-select drop-down if it is an object
我正在使用角度材质。
问题在于mat-select
。 它不绑定记录编辑时的值。
这是我的代码。
的HTML
在这里,你可以看到我绑定test.subject
模型(对象),并显示subject.title
在下拉的文本。
<mat-form-field>
<mat-select [(ngModel)]="test.subject" placeholder="Subject" name="subject">
<mat-option>--</mat-option>
<mat-option *ngFor="let subject of subjects" [value]="subject">
{{subject.title}}
</mat-option>
</mat-select>
</mat-form-field>
零件
在组件中,我从数据库中获得了该值。
this.test = {
"subject": {
"_id": "5b3883b4067d8d2744871eff",
"title": "Subject 1"
}
}
this.subjects = [
{
"_id": "5b3883b4067d8d2744871eff",
"title": "Subject 1"
},{
"_id": "5b3843b4067d8d2744435erx",
"title": "Subject 2"
}
]
因此,在这里我希望下拉列表的值应选择Subject 1
。 但事实并非如此。
嗨@Surjeet Bhadauriya
您可以尝试使用此解决方案。
我已经在Stackblitz上创建了一个演示
使用[compareWith]="compareObjects"
在mat-select
使用对象
component.html
<mat-form-field>
<mat-select [compareWith]="compareObjects" [(ngModel)]="test.subject" placeholder="Subject" name="subject">
<mat-option>--</mat-option>
<mat-option *ngFor="let subject of subjects" [value]="subject">
{{subject.title}}
</mat-option>
</mat-select>
</mat-form-field>
component.ts
test: any;
subjects: Array<any>;
compareObjects(o1: any, o2: any): boolean {
return o1.name === o2.name && o1._id === o2._id;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.