最新消息: 电脑我帮您提供丰富的电脑知识,编程学习,软件下载,win7系统下载。

使用websockets快速获取数据时,Angular应用程序崩溃

IT培训 admin 8浏览 0评论

使用websockets快速获取数据时,Angular应用程序崩溃

我正在快速地从websocket nodejs后端获取数据,并且我使用* ngFor在前端显示,并且在一段时间后我的应用程序开始滞后并且在一段时间后最终崩溃。寻找解决方案。

我正在寻找async是否可以帮助我显示使用* ngFor更改数据

ratesponent.html

<ul>
    <li (click)="coin(coinz.type)" *ngFor="let coinz of btcCoins">
      <a href="javascript:void(0);">
        <span>
           {{coinz.symbol}}/ BTC
        </span>
        <span class="float-right">
            {{coinz.percent | number:'1.1-2'}}
            {{coinz.price}}
        </span>
      </a>
   </li>
</ul>

ratesponent.ts

ngOnInit()
{
   this.socketService.getPrice().subscribe(data =>
   {
      this.btcCoins= data;
   });
}

socket.service.ts

bidask()
{
   let observable = new Observable(observer =>
   {
       this.socket = io(this.domain);
       this.socket.on('bidasks', (data) =>
       {
          observer.next(data);
       });
       return () =>
       {
          this.socket.disconnect();
       };
   });
   return observable;
}
回答如下:

迭代大型且部分更改的集合时,请确保使用trackBy

可以在https://netbasal/angular-2-improve-performance-with-trackby-cc147b5104e5找到一个非常直接的教程

使用websockets快速获取数据时,Angular应用程序崩溃

我正在快速地从websocket nodejs后端获取数据,并且我使用* ngFor在前端显示,并且在一段时间后我的应用程序开始滞后并且在一段时间后最终崩溃。寻找解决方案。

我正在寻找async是否可以帮助我显示使用* ngFor更改数据

ratesponent.html

<ul>
    <li (click)="coin(coinz.type)" *ngFor="let coinz of btcCoins">
      <a href="javascript:void(0);">
        <span>
           {{coinz.symbol}}/ BTC
        </span>
        <span class="float-right">
            {{coinz.percent | number:'1.1-2'}}
            {{coinz.price}}
        </span>
      </a>
   </li>
</ul>

ratesponent.ts

ngOnInit()
{
   this.socketService.getPrice().subscribe(data =>
   {
      this.btcCoins= data;
   });
}

socket.service.ts

bidask()
{
   let observable = new Observable(observer =>
   {
       this.socket = io(this.domain);
       this.socket.on('bidasks', (data) =>
       {
          observer.next(data);
       });
       return () =>
       {
          this.socket.disconnect();
       };
   });
   return observable;
}
回答如下:

迭代大型且部分更改的集合时,请确保使用trackBy

可以在https://netbasal/angular-2-improve-performance-with-trackby-cc147b5104e5找到一个非常直接的教程

发布评论

评论列表 (0)

  1. 暂无评论