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

如何重新填充角度primeng下拉列表的选择选项

1 个答案: