当垫子选项切换为隐藏或可见时，重新绑定角度材质自动完成

Question

我有一个由50行组成的表，其中每行都有一列带有自动完成输入。每个自动完成都有350个选项，这意味着我正在渲染17kmat-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);
}

这看起来大大加快了页面的速度。但是，这会破坏自动完成功能。我认为这是因为mat选项已从DOM中删除。在聚焦期间如何重新绑定？

或者有其他方法可以解决我最初的性能问题吗？

Answer 1

您需要使用observable来处理此问题！

• 定义与FormControl链接的input字段
• 跟踪FormControl的valueChanges，它已经是一个observable了
• 将CCD_ 7转换为选项列表
• 对于observable选项，请使用async管道

请检查：

https://stackblitz.com/angular/pbaaqlmqekm?file=src%2Fapp%2Fautocomplete-过滤器-样本.ts