角度材料的 mat-select 中的数据绑定不起作用答案

【问题标题】：Data binding in mat-select of angular materials does not work角度材料的 mat-select 中的数据绑定不起作用
【发布时间】：2019-03-09 11:49:35
【问题描述】：

我在我的应用程序的首页使用 angular 6 和 angular 材质，并且我有一个名为 Roles 的模块，它具有与之关联的权限集合，在 Roles 页面上，我有一个编辑按钮，单击该按钮可检索角色通过其 id 和角色具有与其关联的权限集合，如下图所示：当我单击编辑按钮时，会出现一个弹出窗口，这是一个有角度的材料形式和其他字段，它有以下字段：

<div>
    <mat-form-field class="form" floatPlaceholder="never" shouldPlaceholderFloat="false">
     <mat-select [(ngModel)] = "data.permissions" [ngModelOptions]="{standalone: true}" multiple>
       <mat-option *ngFor="let permission of data.allPermissions" [value]="permission.name">
         {{permission.name}}
       </mat-option>
     </mat-select>
    </mat-form-field>
 </div>

它预计 permissions 数组应该预先填充在 mat-select 下拉列表中，因为我已将它与 [(ngModel)] = "data.permissions" 绑定，但它没有，正如您在第二张图片中看到的那样

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： angular angular-material

【解决方案1】：

你需要的改变：

第一：

在 HTML 和 TS 代码中使用 [compareWith]="compareFn"：

compareFn(c1,c2): boolean {
  return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

第二：

对于mat-option，将[value] 设置为permission，例如：

[value]="permission"

HTML 代码：

<div>
    <mat-form-field class="form" floatPlaceholder="never" shouldPlaceholderFloat="false">
        <mat-select [(ngModel)]="data.permissions" [ngModelOptions]="{standalone: true}" multiple [compareWith]="compareFn">
            <mat-option *ngFor="let permission of data.allPermissions" [value]="permission">
                {{permission.name}}
            </mat-option>
        </mat-select>
    </mat-form-field>
</div>

Stackblitz

【讨论】：

感谢@Prashant，它有效，非常感谢。 :)

【解决方案2】：

您将在“权限”中，选择选项时，您可以捕获一个事件以获取刚刚选定的项目的名称。

 <div >
<mat-form-field class="form" floatPlaceholder="never" shouldPlaceholderFloat="false">
 <mat-select [(ngModel)] = "data.permissions" [ngModelOptions]="{standalone: true}" multiple>
   <mat-option *ngFor="let permission of data.permissions" [value]="permission.name">
     {{permission.name}}
   </mat-option>
 </mat-select>
</mat-form-field>


</div>

NgModel 是所有权限的 item.name。你把权限数组放到这个里面，怎么显示？

【讨论】：

您想显示权限数组并在所有权限推送中选择一个项目吗？还是意思？请详细描述您的案例。