Question

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

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是有效的演示：

编辑：

如果您的数据是，则可以使用[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;
}

如何绑定“物料多选”的值

1 个答案: