Question

这是一个分为两部分的问题。使用Angular 6，我将返回带有嵌套集合的Observable。我需要嵌套集合作为反应形式多个选择列表中的选定值。 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]

...'menus'是嵌套的集合，其中包含为此menuItem分配的菜单的ID和名称。

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));}

我认为这是我需要展平可观察对象的地方，以使嵌套集合摆脱嵌套，但是我不确定如何做到这一点，仍然保留我的类定义。

已检索OnItem

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]，但该菜单也不起作用，这就是为什么我有两个问题。：）

谢谢！

选择下拉/展平可观察

0 个答案: