Блог

Мое приложение основано на платформе Angular 9. Он имеет функцию, которая визуализирует текущие данные с помощью ngx-диаграмм, опубликованных с помощью MQTT(ngx-mqtt). Я использую угловой материал 9 matTable для отображения записей, и значения в столбце постоянно меняются, пока вы не закроете приложение или не отпишетесь от данных MQTT live. Приложение хорошо справляется с этим до 5 минут, а затем оно просто зависает, и страница перестает отвечать на запросы.

Как я могу решить эту проблему, не затрагивая другие функции приложения? Предложения/рекомендации по решению этой проблемы весьма заметны. Заранее спасибо!!!.

компонент.ts

 //Initializing ngx-charts constructor() {  this.multi = [{  name: 'label1',  series: new Array(),  },  {  name: 'label2',  series: new Array(),  },  ];  } ngOnInit() {  this.initChart();  this.subscribingToMQTT(); } initChart() {  for (let i = 0; i lt; 5; i  ) {  this.multi[0].series.push({  name: 0,  value: 0,  });   this.multi[1].series.push({  name: 0,  value: 0,  });  } } subscribingToMQTT() {  this._mqttSubscriber = this.mqttService  .observe(`myTopic`)  .subscribe(  (jsonLiveData: IMqttMessage) =gt; {  let _data = jsonLiveData.payload.toString();  console.log('Live Data: ', _data);  this.JSONLiveData = this.IsJsonString(`[${_data}]`);  this.bindTxRxData(this.JSONLiveData[0]);  },  (error) =gt; {  console.log('Something went wrong while fetching live data from MQTT');  }  ); } bindTxRxData(data) {  if (data) {  this.bindView(moment().seconds(), data);  } }  bindView(currentSecond: number, data) {  if (currentSecond lt;= 12) {  this.multi[0].series[0].name = 5;  this.multi[0].series[0].value  = data.rx;  this.multi[1].series[0].name = 5;  this.multi[1].series[0].value  = data.tx;  } else if (currentSecond gt; 12 amp;amp; currentSecond lt;= 24) {  this.multi[0].series[1].name = 10;  this.multi[0].series[1].value  = data.rx;  this.multi[1].series[1].name = 10;  this.multi[1].series[1].value  = data.tx;  } else if (currentSecond gt; 24 amp;amp; currentSecond lt;= 36) {  this.multi[0].series[2].name = 15;  this.multi[0].series[2].value  = data.rx;  this.multi[1].series[2].name = 15;  this.multi[1].series[2].value  = data.tx;  } else if (currentSecond gt; 36 amp;amp; currentSecond lt;= 48) {  this.multi[0].series[3].name = 20;  this.multi[0].series[3].value  = data.rx;  this.multi[1].series[3].name = 20;  this.multi[1].series[3].value  = data.tx;  } else if (currentSecond gt; 48 amp;amp; currentSecond lt;= 60) {  this.multi[0].series[4].name = 25;  this.multi[0].series[4].value  = data.rx;  this.multi[1].series[4].name = 25;  this.multi[1].series[4].value  = data.tx;  }  if (this.multi[0].series.length gt; 50 amp;amp; this.multi[1].series.length gt; 50) {  this.multi[0].series.splice(0, 20);  this.multi[1].series.splice(0, 20);  this.multi = [...this.multi];  } else {  this.multi = [...this.multi];  } }  ngOnDestroy() {  this._mqttSubscriber.unsubscribe();  }  

Component.html

 lt;ngx-charts-line-chart [scheme]="colorScheme" [legend]="legend"[results]="multi"  [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend"  [legendTitle]="title" [showXAxisLabel]="showXAxisLabel"  [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel"  [autoScale]="autoScale" [animations]="animations"gt; lt;/ngx-charts-line-chartgt;