我正在尝试使用由不同类型组成的mat-select组件来编辑某些成员的firebase数据.
我不确定我的节点结构但是我这样做了：
member:
member1:
name:
types:
typekey1 : Title1
typekey3 : Title3
...
types:
typekey1:
key: typekey1
title: Title1
typekey2:
key: typekey2
title: Title2
typekey3:
key: typekey3
title: Title3
...
所以我不能做以下功能
compareFn(t1: Type,t2: Type): boolean {
return t1 && t2 ? t1.key === t2.key : t1 === t2;
}
使用模板
<mat-form-field>
<mat-select [compareWith]="compareFn" [(ngModel)]="member.types" multiple>
<mat-option
*ngFor="let type of types | async"
[value]="type">
{{type.title}}
</mat-option>
解决方法
对于以下结构的对象：
listOfObjs = [{ name: 'john',id: '1'},{ name: 'jimmy',id: '2'},...]
像这样定义标记：
<mat-form-field>
<mat-select
[compareWith]="compareObjects"
[(ngModel)]="obj">
<mat-option *ngFor="let obj of listOfObjs" [value]="obj">
{{ obj.name }}
</mat-option>
</mat-select>
</mat-form-field>
并定义比较函数如下：
compareObjects(o1: any,o2: any) {
if(o1.name == o2.name && o1.id == o2.id )
return true;
else return false
}
