Проблема с обновлением данных таблицы HTML при сбое браузера при получении данных каждую секунду с помощью сокета

Question

Я показываю данные в реальном времени в таблице HTML, получая данные из внутреннего сокета, разработанного с использованием Node.js, который отправляет данные из 200 строк (объектов) каждую секунду, у которых изменилось значение некоторого объекта.Когда я пытаюсь отобразить или отобразить эти данные в HTML-таблице, происходит сбой браузера и ничего не отображается.

Для этого я использую библиотеки таблиц Angular и D3.Код прилагается ниже.Пожалуйста, помогите мне с некоторыми способами исправить это или даже лучше предложить решение этой проблемы.

My Component.ts File

import { Component, OnInit } from '@angular/core';
import { HttpService } from '../../Service/http.service';
import { SymbolClass } from 'src/app/Model/Symbol';
import { SocketService } from 'src/app/Service/socket.service';
import { ResponseClass } from 'src/app/Model/Response';
import * as d3 from 'd3';
import { Subscription } from 'rxjs';
import { DataSetClass } from 'src/app/Model/DataSet';
import { ChangeDetectorRef } from '@angular/core';
import { BidData } from 'src/app/Model/DataBid';

@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  private symbolList: SymbolClass[];
  private symbolSelected = "XBTUSD";
  private url = 'http://188.166.85.186:7000';
  private socket;
  private dataSetlist: ResponseClass;
  private sub: Subscription;
  private askDept: DataSetClass[];
  private bidDept: BidData[];

  constructor(private httpService: HttpService, private socketService: SocketService, private changeDetectorRef: ChangeDetectorRef) {
  }

  ngOnInit() {
    var leftTable = d3.select('#leftTable')
    var rightTable = d3.select('#rightTable')
    leftTable.append('tbody')
    rightTable.append('tbody')

    this.httpService.getSymbol()
    .subscribe(data => {
      this.symbolList = data
      this.socketService.emitAfterSymbolChange(this.symbolSelected);
      this.sub = this.socketService.getDataResponse()
        .subscribe(data => {
          this.dataSetlist = data
          this.askDept = data.askDepth
          this.setupData(this.askDept,'#leftTable')
          this.bidDept = data.bidDepth
          this.setupData(this.bidDept,'#rightTable')
        });
        
    });

  }
  private dev = function(){
    this.setupData(this.randomizeData(),'#leftTable')
    this.setupData(this.randomizeData(),'#rightTable')
  }

  private setupData = function (data: any,tableType: String) {
    var rows = d3.select(tableType).select('tbody')
      .selectAll('tr')
      .data(data, function (d) {
        return d.title;
      })
    rows.exit().remove()
    var entertd = rows.enter()
      .append('tr')
      .selectAll('td')
      .data(function (d) { 
        return d3.map(d).values();
      })
      .enter()
      .append('td')
      .append('div')
      .append('span')
      .text(function(d){
        return d;
      })

    var td = rows.selectAll('td')
      .data(function (d) { 
        return d3.map(d).entries();
      })
      .attr('class', function (d) { return d.key })

    td.select('span')
      .text(function (d) {
        if (d.key == 'conversion_rate') {
          return Math.round(100 * d.value) + '%'
        }
        return d.value
      })
  }
}

Мой файл component.html

<div class="container" style="margin-top: 100px; margin-bottom: 100px;">
  <select class="form-control">
    <option *ngFor="let sym of symbolList">{{sym}}</option>
  </select>
  <div class="row" style="margin:20px 0px;">
    <button (click)="dev()" type="button">Update Data</button>
  </div>
  <div class="row">
    <div class="col-lg-12 col-md-12 mt-2">
      <div class="chartDoug bg-dark">
        <span class="headTip text-nowrap" style="font-size:20px">Live Order Book!</span>
        <div id="myChart"></div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col col-xs-12 col-sm-6 col-md-3 col-lg-3">
      <h4 style="text-align:center; color:red;float:left;margin-left:10px;">Volumn:</h4>
        <h4 style="text-align:right; color:red;float:left;margin-left:5px;" class="volumn"></h4>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-3 col-lg-3">
      <h4 style="text-align:center; color:green;float:left;margin-left:10px;">Last Price:</h4>
        <h4 style="text-align:right; color:green;float:left;margin-left:5px;" class="lastprice"></h4>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-3 col-lg-3">
      <h4 style="text-align:center; color:red;float:left;margin-left:10px;">HIGH:</h4>
        <h4 style="text-align:right; color:red;margin-left:5px;float:left;" class="high"></h4>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-3 col-lg-3">
      <h4 style="text-align:center; color:green;float:left;margin-left:10px;">LOW:</h4>
        <h4 style="text-align:right; color:green;margin-left:5px;float:left;" class="low"></h4>
    </div>
  </div>
  <div class="row">
    <div class="col col-xs-12 col-sm-12 col-md-6 col-lg-6">
      <h2 style="text-align:center; color:green;">BUY</h2>
      <h4 style="text-align:right; color:green;" class="buy_total_amount"></h4>
      <table id="leftTable" class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th style="text-align: center;">No</th>
            <th style="text-align: center;">Price</th>
            <th style="text-align: center;">Quantity</th>
            <th style="text-align: center;">Total Amount</th>
          </tr>
        </thead>
        <tbody style="text-align: right;" class="buy">
        </tbody>
      </table>
    </div>
    <div class="col col-xs-12 col-sm-12 col-md-6 col-lg-6">
      <h2 style="text-align:center; color:red;">SELL</h2>
      <h4 style="text-align:right; color:red;" class="sell_total_amount"></h4>
      <table id="rightTable" class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th style="text-align: center;">No</th>
            <th style="text-align: center;">Price</th>
            <th style="text-align: center;">Quantity</th>
            <th style="text-align: center;">Total Amount</th>
          </tr>
        </thead>
        <tbody style="text-align: right;" class="sell">
        </tbody>
      </table>
    </div>
  </div>
</div>