Как связать значение для Material-Multi-Select

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 - рабочая демонстрация:

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;
}