PrimeNg 多选返回空值答案

【问题标题】：PrimeNg multiselect returning empty valuesPrimeNg 多选返回空值
【发布时间】：2020-08-13 15:33:05
【问题描述】：

我有这个通过 API 调用得到的 json：

 [
  {
    "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[]>();

我的电话如下：

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

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

<p-multiSelect
  [options]="categories"
  [(ngModel)]="selectedCategories"
  [filter]="true"
  [showTransitionOptions]="'50ms'"
  [hideTransitionOptions]="'50ms'"
>
</p-multiSelect>

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

【问题讨论】：

考虑将 optionLabel="IndexName" 添加到您的多选中。
它只有在我对我的对象进行硬编码时才有效......我会尝试找出解决方案。

标签： angular primeng

【解决方案1】：

感谢 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 }}

【讨论】：