Question

我想使用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;
  }

提前谢谢！

Answer 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

Answer 2

保存自动完成组件的组件，它的ChangeDetectionStrategy是在OnPush上设置的，这引起了问题。因此，PrimeNg自动完成功能无法正确更新视图。

我通过删除OnPush策略并将其保留为Default或调用Observables订阅中的ChangeDetectorRefs markForCheck（）解决了该问题。

PrimeNG自动填充功能不会通过键入搜索查询显示任何建议

2 个答案:

html

ts