PrimeNG Autocomplete не показывает никаких предложений, набрав поисковый запрос - PullRequest
Новая
       15

PrimeNG Autocomplete не показывает никаких предложений, набрав поисковый запрос

1 голос
/ 16 мая 2019

Я хочу использовать компонент автозаполнения 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;
  }

Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 16 мая 2019

Создан минимальный рабочий пример с вызовом 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

0 голосов
/ 21 мая 2019

Компонент, который содержал Компонент автозаполнения, его ChangeDetectionStrategy был установлен на OnPush, и это вызвало проблему. Из-за этого автозаполнение PrimeNg не может правильно обновить представление.

Я решил это, либо удалив стратегию OnPush и оставив ее по умолчанию, либо вызвав метод ChangeDetectorRefs markForCheck () в Observables подписаться.

...