Привязка данных в mat-select угловых материалов не работает

Question

Я использую угловой 6 и угловой материал для первой страницы своего приложения, и у меня есть модуль под названием Roles, с которым связан набор разрешений, на странице Roles у меня есть кнопка редактирования, которая при нажатии вызываетроль по ее идентификатору, и роль имеет набор разрешений, связанных с ней, как вы можете видеть на изображении ниже: allPermissions and permission collection in it">, когда я нажимаю кнопку редактирования, появляется всплывающее окно, которое является угловымФорма материала и среди других полей, она имеет следующее поле:

<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 должен быть предварительно заполнен в раскрывающемся списке выбора матов, потому что я связал его с [(ngModel)] = "data.permissions", но это не так, как вы можете видеть на втором изображении

.

Любая помощь будет высоко оценена.СПАСИБО!

Answer 1

Вы ищете это?

Измените то, что вам нужно:

Первый:

Используйте [compareWith]="compareFn" в HTML и коде TS:

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

Answer 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 всех разрешений.Вы ставите массив разрешений на это, как отобразить?