使用Angular Material mat-select组件中的compareWith函数和链接

发布时间：2020-12-17 17:10:51 所属栏目：安全来源：网络整理

导读：我正在尝试使用由不同类型组成的mat-select组件来编辑某些成员的firebase数据. 我不确定我的节点结构但是我这样做了： member: member1: name: types: typekey1 : Title1 typekey3 : Title3 ...types: typekey1: key: typekey1 title: Title1 typekey2: key:

我正在尝试使用由不同类型组成的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>

我似乎无法找到在compareFn函数中连接这两种类型的方法,并在组件启动时选择了该选项

解决方法

对于以下结构的对象：

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
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!