mat-autocomplete: не отображать старый список - PullRequest
Новая
       3

mat-autocomplete: не отображать старый список

0 голосов
/ 24 октября 2019

С помощью следующего скрипта я могу добавить <mat-option> теги:

HTML 

    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
      <mat-option (onSelectionChange)="onEnter($event)" *ngFor="let data of technologies" [value]="data.technology">
        <span matBadge="{{data.counter}}" matBadgeOverlap="false">{{data.technology}} </span>
      </mat-option>
    </mat-autocomplete>

TS 

    // On Key up, show technologies
     onKeyUp(event: any): void {
      if (event.target.value.trim().length > 0) {
        this.technologiesService.getTechnologies(event.target.value)
          .subscribe(data => {
            if (JSON.stringify(this.technologies) !== JSON.stringify(data)) {
              this.technologies = data;
            }
          });
      }

Проблема

Если я нажму клавишу, я получу список параметров. Если я нажму другую клавишу, отобразится тот же список (массив technologies), и примерно через 1 секунду он исчезнет и отобразится новый список.

Может быть, это требует времени, потому что новые данные должны быть отправлены с сервера. Но как сделать так, чтобы он отображал ТОЛЬКО новый список?

1 Ответ

1 голос
/ 24 октября 2019

Да, новый список не будет отображаться, пока не поступят данные. Вы можете установить this.technologies в пустой массив и т. Д.

И у вас есть два потока здесь - вызов API и события keyup. Лучше объединить их в один, чтобы иметь больше контроля над ним и упростить реализацию других функций (например, debounceTime, загрузка анимации и т. Д.): 

@ViewChild('auto', {static: false}) matAutocomplete: ElementRef<HTMLInputElement>;

fromEvent(this.matAutocomplete.nativeElement, 'keyup').pipe(
  switchMap(event => {
    this.technologies = [];
    return this.technologiesService.getTechnologies(event.target.value)
  })
).subscribe(data => {
  if (JSON.stringify(this.technologies) !== JSON.stringify(data)) {
    this.technologies = data;
  }
})

Необходимо использовать это в ngAfterViewInit(), чтобы получить ссылкуthis.matAutocomplete (и, конечно, используйте для этого @ViewChild ()).

...