Как предварительно установить элементы динамического выбора мата, выбранные в Angular Material

Question

Я создаю форму редактирования, которая содержит несколько полей выбора с множественным выбором, которые создаются динамически.

Обновленный код:

<mat-select multiple [(ngModel)]="dispoArray[clase.nombre]" name="clase.nombre" (selectionChange)="withoutDispositivo()"
    [ngModelOptions]="{standalone: true}">
    <mat-option *ngFor="let dispo of clase.dispositivos" [(value)]="dispo.id">
        {{ dispo.descripcion }}
    </mat-option>
</mat-select>

Это функция, отвечающая за построение этихfields,

Обновленный код:

prepareClaseDispositivo() {
    this.dispositivos.forEach(dispo => {
        if (!this.labelDispositivos.includes(dispo.clase_dispositivo.nombre)) {
            this.labelDispositivos.push(dispo.clase_dispositivo.nombre);
        }
    });
    this.labelDispositivos.forEach(clase => {
        let arrayByClase = new Array();
        this.dispositivos.forEach(dispo => {
            if (clase === dispo.clase_dispositivo.nombre) {
                if (this.passedData.dispositivos) {
                    for (const d of this.passedData.dispositivos) {
                        if (d.descripcion == dispo.descripcion) {
                            this.dispoArrayValue.push({ id: d.id, descripcion: d.descripcion });
                        }
                    }
                }
                arrayByClase.push({ id: dispo.id, descripcion: dispo.descripcion });
            }
        });
        let json = { nombre: clase, dispositivos: arrayByClase };
        this.dispoByClase.push(json);
    });
}

Мой вопрос заключается в том, как я могу предварительно установить параметры, которые находятся в массиве, поступающем из базы данных, выбранной при построении формы

Answer 1

Чтобы предварительно заполнить mat-select при использовании ngModel, установите значение модели на ваш выбор. Например:

HTML

<mat-select multiple [(ngModel)]="selected">
  <mat-option value="option1">Option 1</mat-option>
  <mat-option value="option2">Option 2</mat-option>
  <mat-option value="option3">Option 3</mat-option>
</mat-select>

TS

selected = ['option1', 'option3'];