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

【问题标题】：Primeng p-multiSelect search function is not workingPrimeng p-multiSelect 搜索功能不起作用
【发布时间】：2022-04-25 19:53:49
【问题描述】：

我正在使用 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。

【问题讨论】：

_doctypeLabelList 长什么样子？，您是否尝试过使用filterBy 属性，启用过滤后，filterBy 决定要搜索的字段或字段（逗号分隔）。
您好 Denes，感谢您与我们联系。 _doctypeLabelList 看起来应该如此，它具有填充选项下拉列表的所有适当值。我用过 [filterBy] = "doctypeLabel" 不幸的是它没有用。我觉得我错过了一些简单的部分，但我一生无法弄清楚它可能是什么。
我的意思是，你的 _doctypeLabelList 是什么结构。有一个“标签”属性？默认情况下，primeng 选项具有以下结构。一个“标签”属性和一个“值”属性。如果您的选项没有该结构，则必须指定它
你说得对，我刚刚发现了这个。选项必须绑定到 SelectedItem 数组，但我的只是一个普通的字符串 []。更改每个数组以适应“标签”和“值”属性对我来说似乎非常麻烦和昂贵。有没有解决的办法？如果我的 _doctypeLabelList 是：["Mike", "Steve", "Mark", "Mickey"]，这将如何工作？
对，我现在明白了。他们应该更新文档，直到修复为止。将我的字符串数组转移到 {label: val, value: val} 后，我能够让它工作

标签： angular primeng

【解决方案1】：

我知道原来的发帖人已经说过他们已经成功了，但是当我自己试图找到答案时，没有给出很好的解释。所以我想澄清我做了什么。

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

似乎很常见，他们的文档并没有完全表明这一点。

【讨论】：

【解决方案2】：

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

通过将字符串数组转换为 SelectItem[] 数组并将其用作 [options] 输入来修复它。

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

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

模板实现：

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

【讨论】：

【解决方案3】：

为了在 p-multiselect 中使用搜索功能，您需要设置 [optionValue] 属性。 PrimeNG 使用它来区分选项。

 <p-multiSelect  
   [(ngModel)]="doctypeLabel" 
   [options]="_doctypeLabelList"  
   placeholder="Select"
   [filter]="true" 
   optionValue="id" 
   (onChange)="filter($event.value)">
 </p-multiSelect>

【讨论】：