typescript - 如何为 Material-Multi-Select 绑定(bind)值

Question

如何在多选中绑定(bind)默认选中的数据？

HTML代码:

<mat-select [(ngModel)]="userCreation.aspId" name="aspId"   #aspId="ngModel" [ngClass]="{ 'is-invalid': f.submitted && aspId.invalid }" required multiple="true">
   <mat-option *ngFor="let userCreation of aspdata"  [value]="userCreation.aspId" >
     {{userCreation.officeName}}
   </mat-option>
</mat-select>

在 TS 文件中:

this.userCreation.aspId = element.asplist[0].aspId

Answer 1

多选Mat-Select的值必须是数组，

所以预期的 JSON 应该是:

                           Here must be an array
                                 \/\/\/
userCreation : any  = { aspId : ['name'] };

所以如果你想添加一个新的选项，那么你可以使用:

this.userCreation.aspId.push('new-option')

Here是一个工作演示:

EDIT:

如果你的数据是那么你可以使用[compareWith]属性:

假设你的数据是这样的:

aspId : [{"id":1,"itemName":"India"}, {"id":3, "itemName":"Australia"}]

HTML代码:

<mat-select [(ngModel)]="userCreation.aspId" [compareWith]="compareFn" name="aspId"   #aspId="ngModel" required multiple="true">
   <mat-option *ngFor="let userCreation of dropdownList" [value]="userCreation" >
              {{userCreation.itemName}}
   </mat-option>
</mat-select>

TS代码:

compareFn(val1: any, val2: any) {
    return val1 && val2 ? val1.id === val2.id : val1 === val2;
}