PrimeNg multiselect返回空值

编程问答 2022-10-27

问题描述

我有一个通过API调用获取的json：

tmp

我声明了以下变量：

 [
  {
    "CategoryID": "1","CategoryName": "cat1","DocDescription": "cat1 description","Indexes": [
      {
        "IndexID": "1","IndexName": "id1name",},{
        "IndexID": "2","IndexName": "id2name",{
        "IndexID": "3","IndexName": "id3name",}..
    ]
  }... 
]

我的电话是：

categoriesResponseModel: CategoriesResponseModel;
categories: CategoryModel[] = [];
category: CategoryModel;
@Output()  selectedCategories =  new EventEmitter<CategoryModel[]>();

我尝试使用PrimeNg在多选择输入中显示结果：

private getCategories(): void {
  const response = this.apiService.getCategories().subscribe(
    (res) => {
      this.categoriesResponseModel = JSON.parse(res);
      for (const category of this.categoriesResponseModel.CATEGORIES) {
        this.categories.push(category);
      }
    },(err) => { console.log(err.message); },() => { console.log('Completed - Categories pushed'); }
  );
}

我确实使用{{类别| json}}，在我的模板中也显示了多选功能，但无法正常工作

enter image description here

解决方法

感谢Hassan和PrimeNg文档，它可以完美运行。 我终于使用了模板化版本：

<p-multiSelect
  [options]="categories"
  [(ngModel)]="selectedCategories"
  defaultLabel="Select a Category"
  optionLabel="CategoryName"
  class="multiselect-custom">
  <ng-template let-value pTemplate="selectedItems">
    <div class="itemlist itemlist-value" *ngFor="let option of selectedCategories">
      <div>{{option.CategoryName }}</div>
    </div>
    <div *ngIf="!selectedCategories || selectedCategories.length === 0" class="country-placeholder">
      Select categories
    </div>
  </ng-template>
  <ng-template let-category pTemplate="item">
    <div class="itemlist">
      <div>{{category.value.CategoryName }}</div>
    </div>
  </ng-template>
</p-multiSelect>

我遇到同样的问题，因为我试图显示：

{{category.CategoryName }}

代替

{{category.value.CategoryName }}
angularprimeng