Primeng p-multiSelect 搜索功能不起作用

Question

我正在与 PrimeNg 合作来过滤我的 p 表上的列。

我有

p-multiSelect

嵌套在

p-ColumnFilter

中。

过滤按预期工作，但是

p-multiSelect

内的搜索功能始终返回

no results found

。

这是我的模板代码：

<th class="table-header-primary" [ngStyle]="{'width':'200px'}" [pSortableColumn]="'docCategory'">Type
  <p-columnFilter  class="p-ml-auto" type="text" field="doctypeLabel"  matchMode="in" display="menu"  [showApplyButton]="false" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
      <p-multiSelect  [(ngModel)]="doctypeLabel" [options]="_doctypeLabelList"  placeholder="Select" (onChange)="filter($event.value)">
      </p-multiSelect>
      </ng-template>
  </p-columnFilter></th>

这是我的相关打字稿文件：

_doctypeLabelList:any[]=[];
doctypeLabel:any="";
  constructor() {
  }

我附上了两张照片，希望能澄清我的问题。

我的多选下拉列表，填充了来自

_doctypeLabelList

:

的适当字段

一旦我尝试在下拉列表中搜索匹配的值：

我尝试过一种方式绑定

doctypeLabel

，但没有成功。

_doctypeLabelList

在选项下拉列表中显示良好，只是在输入栏中搜索时总是会立即得到

no results found

。我真的不知道还能尝试什么。我一遍又一遍地查看 PrimeNg 文档，但没有找到任何结果。文档中的示例是一个相当简单的用例，所以我想知道

p-columnFilter

是否以某种方式影响我的

p-multiSelect

。

Answer 1

有同样烦人的问题，最初我使用 string[] 作为选项的输入，这给了我同样的问题。

通过将字符串数组转换为 SelectItem[] 数组并将其用作 [选项] 输入来修复此问题。

public items: string[]; // <-- OLD INPUT 

// NEW INPUT: return items as SelectItem
get itemsAsSelectItems(): SelectItem [] {
  return this.items.map((item) => ({ label: item.displayName, value: item.value } as SelectItem));
}

模板实现：

<p-multiSelect [options]="itemsAsSelectItems" ... ></p-multiSelect>

Answer 2

我知道原发帖者已经说过他们可以正常工作，但是当我自己尝试寻找答案时，没有给出很好的解释。 所以我想澄清我做了什么。

printersForFilter: any[] = [];

原话：

<p-multiSelect [ngModel]="value" [options]="jobTypesForFilter" placeholder="Any" (onChange)="filter($event?.value)">

工作线：

<p-multiSelect [ngModel]="value" [options]="jobTypesForFilter" placeholder="Any" (onChange)="filter($event?.value)" [optionValue]="'value'" [optionLabel]="'id'">

原话：

this.printersForFilter = Object.values([...new Set(sourceData.map((x) => x.printerDescription ?? ''))]);

工作线：

this.printersForFilter = Object.values([...new Set(sourceData.map((x) => x.printerDescription ?? ''))]).map(x => ({ id: x, value: x}));

PrimeNg 似乎无法仅使用相同的属性作为值和 id。

通过阅读此帖子和这两个链接找到我的答案： https://github.com/primefaces/primeng/issues/10122 https://github.com/primefaces/primeng/issues/9584

似乎很常见，他们的文档并未表明这一点。