mat-option angular 6 中海量数据的性能问题答案

【问题标题】：Performance issue for huge data in mat-option angular 6mat-option angular 6 中海量数据的性能问题
【发布时间】：2019-10-21 16:04:40
【问题描述】：

我已将 Material 方法用于我的供应商数据的下拉菜单。供应商中有超过 12000 个，即 12k + 数据。使用 mat-option，我需要使用 *ngFor，这需要花费大量时间。这使我的应用程序非常缓慢且无响应，就像挂起一样。什么是有效的解决方案？解决方案可能是下拉或其他不同的方法。

<mat-form-field fxFlex.gt-sm>
   <mat-label>Vendor</mat-label>
      <mat-select formControlName="VendorId">
         <mat-option *ngFor="let vendor of vendorData" [value]="vendor.VendorId">
                  {{ vendor.VendorName }}
         </mat-option>
       </mat-select>       
</mat-form-field>

【问题讨论】：

我的第一个想法是包含 12,000 个项目的下拉菜单有多有效？如果这是一个要求，那么我明白，我去过那里。但是您是否可以使用自动完成功能？这可能比让用户滚动浏览 11,999 项以找到他们正在寻找的 1 项更容易使用。 material.angular.io/components/autocomplete/overview
它的渲染占用了所有时间。我建议您研究角度无限滚动解决方案。
@shadowfox476 我需要通过 api 调用实现自动完成，并且在文档中只有要搜索的本地列表。您是否有或可以为此目的建议一些链接？我想通过首先调用 api 并将数据保存在列表中来实现它。然后按照文档所示进行操作。这是好方法还是有其他更好的方法？请有任何建议
我只是从 api 中提取整个列表并按照他们的示例进行操作。否则，您的 api 将必须支持基于输入中的当前值的过滤

标签： angular angular-material

【解决方案1】：

无响应和缓慢的主要原因是组件试图渲染 DOM 上的所有 12,000 个节点元素。

我建议您实现某种无限滚动逻辑，以便在滚动mat-select 选项时仅在特定滚动位置呈现一定数量的节点。

您可以通过以下方式实现它：

1) 安装ng-mat-select-infinite-scroll 包。在 Angular Material 在 mat-select 组件中实现自己的原生无限滚动功能之前，这个包将是为 mat-select 实现无限滚动的最直接的方法。

2) 如果您不想安装其他第三方库，可以参考answer。回答这个问题的人很好地实现了mat-select 的无限滚动。

【讨论】：

【解决方案2】：

这不是前端问题，您可以通过无限滚动在前端实现它，但我建议您在后端使用 redis 服务器或其他一些内存管理工具来处理它，我希望在这种情况下可以工作.

【讨论】：