выберите раскрывающийся список / сгладить наблюдаемые

Это вопрос из двух частей. С Angular 6 я возвращаю наблюдаемое с вложенной коллекцией. Мне нужно, чтобы вложенная коллекция служила выбранными значениями в списке множественного выбора реактивных форм. 1) Используя patchValue, я не могу заставить значения отображаться как выбранные элементы. 2) Как сгладить наблюдаемое или поместить вложенную коллекцию в элемент управления?

HTML:

<mat-form-field>
<mat-select [compareWith]="compareFn" placeholder="Menus" formArrayName="menus" multiple >
<mat-option *ngFor="let menu of menus" [value]="menu">{{menu.name}}</mat-option>
</mat-select>
</mat-form-field>

Класс элемента меню:

id: string
name: string
menus: [id: string, name: string]

...'меню' - это вложенная коллекция, которая содержит идентификатор и имя меню, которому назначен этот элемент меню.

Вызов API:

getMenuItem(id: string) : Observable<MenuItem>{
    return this.http.get<MenuItem>(`${this.URL}/${id}`)
    .pipe(catchError(this.handleError<MenuItem>('getMenuItem')));}

Компонент

Соответствующие части компонента:

createForm(){
this.menuItemForm = this.formBuilder.group({
  itemName: ['', Validators.required ],
  itemDescription: ['', Validators.required ],
  active: true,
  menus: this.menus
})

'this.menus' - это список выбора всех меню

Подписка

getMenuItem(id: string){
this.menuItemService.getMenuItem(id)
  .subscribe(
  (data: MenuItem) => this.onItemRetrieved(data),
  (err: any) => console.log(err));}

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

Получение элемента

onItemRetrieved(menuItem: MenuItem): void {
if (this.menuItemForm){
  this.menuItemForm.reset();
}

this.menuItem = menuItem;

this.menuItemForm.patchValue({
  ...
  menus: this.menuItem.menus      

});

Я ничего не пробовал, чтобы значения в this.menuItem.menus отображались как выбранные в моем списке выбора. В примере данных у меня есть одно меню (идентификатор/имя), и я пробовал this.menuItem.menus[0], и это тоже не работает, поэтому у меня две проблемы. :)

Заранее спасибо!


person markelc    schedule 24.06.2018    source источник
comment
Вы можете поделиться ответом, который вы получаете?   -  person Vikas    schedule 24.06.2018
comment
Ответ API: { "itemname": "Carne Asada", "itemdescription": "A tender skirt...", "active": true, "menus": [{ "id": "AllDayDining", "name": "All Day Dining" } ], "id": "CarneAsada::79b0c6ab-f93b-438f-93fb-2a6272f561c6"}   -  person markelc    schedule 24.06.2018
comment
Я не мог заставить элементы управления материалами работать должным образом, поэтому я создал stackblitz с обычными. Вы можете видеть, что элемент управления select по-прежнему не показывает правильно выбранное меню. angular-s5u4hr.stackblitz.io   -  person markelc    schedule 25.06.2018
comment
Проблема решена. При экспериментировании/отладке выбора я изменил formControlName на formControlArray и забыл изменить его обратно. Спасибо за помощь, Викас.   -  person markelc    schedule 25.06.2018
comment
Круто, ты нашел решение :)   -  person Vikas    schedule 25.06.2018