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

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

0 голосов
/ 24 июня 2018

Это вопрос из двух частей. С 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>

menuItem Class : 

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

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

вызов 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 

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

this.menuItem = menuItem;

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

});

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

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

...