时间戳

首页 > 解决方案 > Angular - 绑定大量数据时 IE 没有响应问题

angular - Angular - 绑定大量数据时 IE 没有响应问题

问题描述

当我将响应绑定到组件变量时，我的服务返回超过 7000 条记录，然后屏幕进入无响应模式。这仅特定于 IE。同样，我在 UI 中有 3 个下拉菜单。我也尝试过解析器，但对我不起作用。服务调用完成后屏幕变为无响应。

组件.ts

 this._myservice.getData(this.param1).subscribe(response => {this.Capabilities = response.json()});

组件.html

     <ul class="dropdown-menu">
      <li *ngFor="let capability of Capabilities;trackBy:capability?.Name" id="{{capability.Id}}">

      <a href="javascript:void(0);" id="{{capability.Id}}">{{capability.Name}}</a>
       </li>
    </ul>

标签： angulartypescriptinternet-explorerobservablesubscription

解决方案

7000条记录！！！记录量很大！！！使用您的代码，您尝试同时将所有记录添加到 dom 中：

<li *ngFor="let capability of Capabilities;trackBy:capability?.Name" id="{{capability.Id}}">

因此，您的浏览器将显示 7000 个原始项目（大量内存消耗）。

对于大量记录，我认为最好通过“虚拟滚动”查看： https ://material.angular.io/cdk/scrolling/overview

https://medium.com/front-end-weekly/how-to-use-virtual-scrolling-using-angular-7-cdk-9802110111fa

和一个演示：https ://stackblitz.com/edit/angular-cdk-demo-virtual-scroll?file=app%2Fapp.component.html

=> 如果您在演示中按 F12，您会看到 app-virtual-scroll 中仅显示少数元素=> 更好的性能

推荐阅读