Angular2/4 mat-select多个ngModel

Question

我有一个启用了多个的 mat-select 下拉列表，我正在使用 NgModel 来存储用户选择的值。

问题是当我导航到另一个页面并返回时，用户选择的值不在 mat-select 中。我知道 ngModel 有这些值......我遗漏了一些东西......

HTML

<mat-form-field>
 <mat-select placeholder="Customers" name="customerDetails" ngDefaultControl       
 formControlName="customerDetails" [(ngModel)]="custonerDetails" 
 [formControl]="customerDetailsCtrl" multiple   
 (ngModelChange)="onCustomerValueChanges(customer)" >
 
  <mat-option *ngFor="let customer of customerDetailsResult"
  [value]="customer">{{customer.CustomerNo}}- 
                     {{customer.CustomerDescription}}
   </mat-option>
 </mat-select>
</mat-form-field>

有什么想法吗？

Answer 1

根据用例，通过简单地绑定(bind)到 ngModel 可能无法将一些默认选项初始化为选定的，因为选项中的对象和先前状态的选定子集中的对象具有不同的身份。感谢对 compareWith 的支持，可以将它们设置为选中状态。

查看官方 Angular 文档 here .

在 Material2 演示应用程序中，他们有一个具有两个实现的函数示​​例。这是here .

在我的组件中，我有一组用户对象 [people] 用于 mat select 的选项。该组件接收选定用户对象 [users] 的集合作为来自先前状态的输入。很公平，[people] 中的对象和 [users] 中的对象具有不同的身份，并且默认情况下，多重选择中的子集不会使用选中的复选框进行初始化。

因此，神奇的 compareWith 只是根据一些给定的值从字面上比较对象并返回 true 或 false，[people] 子集上的复选框获得选中状态。在我的代码中，我决定使用 [(ngModel]) 绑定(bind):

<mat-form-field>
    <mat-select [compareWith]="compareFn" name="users" [(ngModel)]="users" multiple>
        <mat-option *ngFor="let person of people" [value]="person">
           {{ person.username }}
        </mat-option>
   </mat-select>
</mat-form-field>

并且在 .ts 文件中，如果两个用户对象具有相同的 ID，我利用 Angular 文档中的函数返回 true:

compareFn(user1: User, user2: User) {
    return user1 && user2 ? user1.id === user2.id : user1 === user2;
}

如果您有类似的用例，它可能开箱即用。

关于什么是幕后注意事项，compareWith 让我很好奇。我发现它基于 Angular2 中一个名为 looseIdentical 的函数(看看 here )，而该函数又派生自 Google 的 Dart.js 库中的相同函数。可以查到here .