Angular - Как установить выбранные значения для mat-выберите из источника данных таблицы динамического размера

#angular #angular-material

#angular #angular-материал

Вопрос:

Я настраиваю mat-таблицу, которая показывает некоторые значения из источника данных и имеет mat-select с множественным выбором в каждой строке. Источником данных для таблицы является массив объектов («CarManufacturer»), который содержит другой массив объектов («Brand»). В mat-select я показываю полный список всех «брендов».

На данный момент я не могу отменить / выбрать эти «бренды». Они помечены как выбранные или нет. Я не могу это изменить.

Я создал функцию, которая возвращает массив чисел (идентификаторы брендов), который передает [значение] mat-select. В раскрывающемся списке отмечены бренды, которые находятся в массиве CarManufactors, но я не могу ничего выбрать в раскрывающемся списке.

Код:https://stackblitz.com/edit/angular-skrrhb

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

1. Хм .. Не могли бы вы также отправить код? Эта ссылка содержит только демонстрационное приложение

2. Обновлен URL-адрес stackblitz до пути редактора.

3. Хм .. Вместо этого вы должны использовать 2-стороннюю привязку. Причина, по которой поля выбора параметров не могут быть «отменены», заключается в том, что вы привязали каждое из них к getArray() методу, который уже установил значения.

4. Я попытался использовать [(ngModel)]. Не получилось, потому что я чувствую, что мне нужен этот метод getArray(). Есть идеи, как это решить?

Ответ №1:

Проблема в том, что <mat-select [value]="getArray(element.brands)" multiple> всегда возвращает одно и то же значение, несмотря ни на что.

Одним из решений было бы добавить brandSelected в интерфейс бренда и сохранить значения там:

 export interface CarManufacturer {
  id: number;
  name: string;
  brands: Brand[];
  brandsSelected?: number[]; 
}

А затем примените двустороннюю привязку данных в mat-выберите следующим образом:

    <mat-select [(value)]="element.brandSelected" multiple>

Вы можете увидеть рабочий пример здесь:

https://stackblitz.com/edit/angular-ujirgb?file=src/app/app.component.html