如何重新填充Angular Primeng下拉列表的选择选项

Question

我的表格具有使用Primeng组件的下拉列表：

    <p-dropdown 
          [style]="{'width': '100%', 'border': 'none'}" 
          [options]="categories | toSelectItem" 
          name="product.category.id"
          class="primeng-custom-dropdown">
               <ng-template let-category pTemplate="item">
                   <div style="position: relative;">
                     <img src="{{category.image}}" style="width:24px;margin: 0 10px 0"/>
                     <div style="font-size:14px;display:inline;">{{category.label}}</div>
                   </div>
              </ng-template>
   </p-dropdown>

当表格已经加载并且已经显示了类别时，我在添加新类别的表单中有另一个组件。我还希望将新类别添加到Primeng下拉列表中。

我的TS组件看起来如下：

export class ProductFormComponent implements OnInit {
 categories: Category[];
 constructor(
   private api: ApiService
 ) {}
   ngOnInit() {
     this.getCategories();
   }
   getCategories(): void {
      this.api.getCategories()
        .subscribe(categories => { 
          this.categories = categories;
       });
   }
}

再次在单独的函数中再次调用getCategories（）时，下拉列表中的类别列表似乎没有获得更新的列表。我如何也更新Primeng下拉组件中的列表类别？

Answer 1

根据@chautran注释。我订阅了对话框，该对话框添加了新类别，然后将创建类别返回到对话框

的主组件中

addCategory() {
  let dialogRef = this.dialog.open(CategoryFormDialogComponent, {
    position: {
      top: '80px',
    }
  });
  dialogRef.afterClosed().subscribe(category => {
    this.categories.push(category); // As per @Chautran
    this.getCategories();
  });
}