HTML

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

根据用例初始化，选择的某些默认选项可能无法通过简单地绑定到ngModel而起作用，因为选项中的对象和之前状态的选定子集中的对象具有不同的身份< / strong>即可。感谢对compareWith的支持，可以将它们设置为已选中。

查看正式的Angular文档here。

在Material2 demo-app中，他们有一个带有两个实现的函数示例。这是here。

在我的组件中，我有一组用户对象[people]用于mat select的选项。组件从先前状态接收所选用户对象[用户]的集合作为输入。足够公平，[人]中的对象和[用户]中的对象具有不同的身份，默认情况下，多选中的子集不会使用所选复选框进行初始化。

因此，神奇的compareWith只是通过某些给定的值来比较对象并返回true或false，并且[people]子集上的复选框获得所选的状态。在我的代码中，我决定使用[（ngModel））绑定：

<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文件中，如果两个User对象具有相同的id，我使用Angular doc中的函数返回true：

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

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

关于引擎盖下的注释，compareWith让我很好奇。我发现它基于Angular2中的一个函数，名为looseIdentical（看看here），后者又来自谷歌在Dart.js库中的相同内容。它可以找到here。

Answer 2

请检查[(ngModel)]="custonerDetails" 我认为有一些拼写错误，你也可以使用它 [(value)]="custonerDetails"。

Answer 3

如果您确定ngModel中包含值。问题可能是mat-option的[value]属性正在失去这个选择。

试试这个：

[ngValue]="customer" instead of [value]= "customer"

Angular2 / 4 mat-select多个ngModel

HTML

3 个答案: