Это вопрос из двух частей. С 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], и это тоже не работает, поэтому у меня две проблемы. :)
Заранее спасибо!
{ "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