mat-autocomplete：防止显示旧列表

Question

使用以下脚本，我可以添加<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 秒后它消失并显示新列表。

可能需要时间，因为需要从服务器发送新数据。但是我怎样才能让它只显示新列表呢？

Answer 1

是的，在数据​​到达之前不会显示新列表。您可以将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() 来获取它）。