当垫选项切换为隐藏或可见时重新绑定 Angular Material 自动完成？

Question

我有 50 行的 table，其中每一行都有一个带有自动完成输入的列。每个自动完成有 350 个选项，这意味着我正在渲染 17k mat-options，这会减慢应用程序和自动完成输入上的任何交互或点击事件的速度。

50 行和每个自动完成 350 个选项是强制性要求。

我正在测试一项改进，我目前在聚焦时显示垫子选项并在模糊时隐藏它们：


<mat-form-field>
  <input
    type="text"
    matInput
    [(ngModel)]="element.assigned"
    [matAutocomplete]="auto"
    (keyup.enter)="onAddAssignee($event, element)"
    (focus)="showAutocompleteOptions(element, true)"
    (blur)="onAddAssignee($event, element)"
  />
  <mat-autocomplete #auto="matAutocomplete">
    <div *ngIf="element.showAutocompleteOptions">
      <mat-option *ngFor="let assignee of assignees" [value]="assignee" (click)="onAddAssignee($event, element)">
        {{ assignee | truncate: 12 }}
      </mat-option>
    </div>
  </mat-autocomplete>
</mat-form-field>

showAutocompleteOptions(element: SomeObject, value: boolean): void {
  element.showAutocompleteOptions = value;
}

onAddAssignee(element: SomeObject): void {
  // adding some stuff
  this.showAutocompleteOptions(element, false);
}

这似乎大大加快了页面速度。但是，这会破坏自动完成功能。我认为这是因为垫子选项已从 DOM 中删除。对焦时如何重新绑定？

或者有没有其他方法可以解决我原来的性能问题？

Answer 1

您需要使用 observable 来处理！

定义input字段，与FormControl链接。
追踪FormControl的valueChanges，已经是observable.
将 valueChanges 转换为选项列表。
对 observable 选项使用 async 管道。

请检查：

https://stackblitz.com/angular/pbaaqlmqekm?file=src%2Fapp%2Fautocomplete-filter-example.ts

当垫选项切换为隐藏或可见时重新绑定 Angular Material 自动完成？

rebind Angular Material autocomplete when the mat-options are toggled to be hidden or visible?

angular

angular-material

angular-material2