PrimeNG 自动完成不会通过输入搜索查询来显示任何建议答案

【问题标题】：PrimeNG Autocomplete don't show any suggestions by typing search queryPrimeNG 自动完成不会通过输入搜索查询来显示任何建议
【发布时间】：2019-05-22 02:00:58
【问题描述】：

我想使用 PrimeNG 自动完成组件，但它没有按预期工作。如果您在输入字段中键入内容，则会执行 completeMethod，但不会显示结果。我首先测试了 completeMethod，它工作正常并正确过滤了数组，但是该组件没有显示带有我的值的建议列表，而是一直显示加载微调器。键入其他内容后，按任何其他键或单击其他位置会显示结果，但加载微调器仍然存在。

我已经搜索了解决方案，但没有发现对我的问题有用。我读到下拉点击有一些常见的类似问题，所以我尝试应用这些修复，但它对我也没有帮助。

拥有自动完成功能的组件，其 ChangeDetectionStrategy 设置在 OnPush 上

这是我的代码：

组件：

 <p-autoComplete
      [formControlName]="formName"
      [suggestions]="options"
      (completeMethod)="filterMethod($event)"
      [dropdown]="true"
      field="label"
      [multiple]="true"
      [forceSelection]="true"
      [minLength]="3"
      (onDropdownClick)="handleDropdownClick($event)"
    ></p-autoComplete>

过滤方法：

filterMethod(event: { query: string; originalEvent: any }) {
    this.service
      .getSelectItemsByService(this.id)
      .subscribe(options => {
        this.options = this.filter(event.query, options).slice();
      });
  }

  private filter(query: string, options: SelectItem[]): SelectItem[] {
    return query
      ? options.filter(value =>
          value.label
            .toLowerCase()
            .trim()
            .includes(query.toLowerCase().trim())
        )
      : options;
  }

提前谢谢你！

【问题讨论】：

标签： javascript angular primeng

【解决方案1】：

使用 API 调用创建了最小的工作示例，请参考它。开始输入至少 3 个字符，您将获得带有下拉列表的过滤列表

html

<p-autoComplete
[suggestions]="options"
(completeMethod)="filterMethod($event)"
[dropdown]="true"
field="title"
[multiple]="true"
[forceSelection]="true"
[minLength]="3"></p-autoComplete>

ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    options = [];

    constructor(public http: HttpClient) {
    }

    filterMethod(event) {
        this.http.get('https://jsonplaceholder.typicode.com/todos')
        .subscribe(res => {
            const result = (<any>res).filter(option => option.title.includes(event.query));
            console.log(result);
            this.options = result;
        });
    }
}

你可以参考这个例子：http://keepnote.cc/code/p-auto-complete-with-api-calling-example

【讨论】：

您好，感谢您的解决方案，我在 stackblitz 上对其进行了测试，它在那里运行良好。无论如何，当我在我的项目中使用它时，我仍然遇到同样的问题。我真的不知道问题出在哪里。过滤后的值在开发者控制台中正确显示，但是primeng不更新组件。
你能在stackbliz中复制同样的问题吗？
我解决了我的问题，它是由父组件上设置的 OnPush ChangeDetectionStrategy 引起的。通过删除它，该组件将照常工作。

【解决方案2】：

包含自动完成组件的组件，它的 ChangeDetectionStrategy 设置在 OnPush 上，这导致了问题。因此，PrimeNg 自动完成无法正确更新视图。

我通过删除 OnPush 策略并将其保留为 Default 或在 Observables 订阅中调用 ChangeDetectorRefs markForCheck() 来解决它。

【讨论】：