Angular2/4 mat-select 多个 ngModel

Posted 2023-03-13

【中文标题】Angular2/4 mat-select 多个 ngModel

【英文标题】：Angular2/4 mat-select multiple ngModel

【发布时间】：2018-03-21 16:11:21

【问题描述】：

我有一个启用了多个的 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>

有什么想法吗？

【问题讨论】：

[(ngModel)]=custonerDetails 中的错字？

@MicheleSapignoli 在这里发帖时的错字...在代码中是正确的

请参阅下面的@Andrey Kolybelnikov 回答。它解决了问题。

【参考方案1】：

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

查看官方 Angular 文档 here。

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

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

所以，神奇的compareWith 只是通过一些给定的值来比较对象并返回真或假，[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 文档中的函数返回 true：

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

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

在底层注释上，compareWith 让我很好奇。我发现它基于 Angular2 中的一个名为looseIdentical 的函数（看看here），它又派生自Google 的Dart.js 库中的相同函数。可以找到here。

【讨论】：

在我找到这个答案后几乎浪费了 2 个小时，它的工作非常好。谢谢@reddree。 1 个人喜欢我。

为我节省了大量时间！

【参考方案2】：

请查看[(ngModel)]="custonerDetails" 我认为有一些拼写错误，您也可以像这样使用它 [(value)]="custonerDetails".

【参考方案3】：

如果您确定 ngModel 具有其中的价值。问题可能是 mat-option 的 [value] 属性正在丢失此选择。

试试这个：

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