将Angular Material材质选择组件中的compareWith函数与链接的Firebase值一起使用 [英] Use compareWith function from Angular Material mat-select component with linked firebase value
本文介绍了将Angular Material材质选择组件中的compareWith函数与链接的Firebase值一起使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用由不同类型组成的mat-select组件来编辑某些成员的firebase数据.
I'm trying to edit some member's firebase data with a mat-select component composed of different types.
我不确定节点的结构,但是我做到了:
I'm not sure with my structure of nodes but I did this :
member:
member1:
name:
types:
typekey1 : Title1
typekey3 : Title3
...
types:
typekey1:
key: typekey1
title: Title1
typekey2:
key: typekey2
title: Title2
typekey3:
key: typekey3
title: Title3
...
所以我不能执行以下功能
So I can't make the following function
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>
我似乎找不到在compareFn函数中连接两种类型并在启动组件时选择选项的方法
I can't seem to find the way to connect the two kind of type in the compareFn function and have selected the option when the component is launched
推荐答案
对于具有以下结构的对象:
For an object of the following structure:
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
}
这篇关于将Angular Material材质选择组件中的compareWith函数与链接的Firebase值一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文