javascript - 添加数据后需要刷新Angular组件

Question

对我来说很难解决这个问题。我有一个组件从 2 个不同的 url 获取 Json 数据来创建图表：

• 1 更新数据用于旧值
• 另一个为实时值

这是组件：

@Component({
  selector: 'app-staticchart',
  templateUrl: './staticchart.component.html',
  styleUrls: ['./staticchart.component.scss']
})
export class StaticchartComponent implements OnInit {
  candles: Observable<Candlecollect[]>;
  data: Array<any>;
  candlecollect: Candlecollect;
  start = Date.now();
  end = Date.now() + 1;
 

  constructor(private candlecollectService: CandlecollectService,
              public spinnerService: SpinnerService) {
  }

  ngOnInit(): void {
    this.loadChart();
  }

  loadChart(): void {

    /*
    * Request to get the 500 latest Candlesticks - send by rest to the back api
    */
    const answer = this.candlecollectService.extractCandles('url_1')
      .subscribe(data => {
        // tslint:disable-next-line:forin
        for (let counter = 1; counter < 500; counter++) {

          candleSeries.update({
            // @ts-ignore
            time: data.openTime / 1000,
            open: data.open,
            high: data.high,
            low: data.low,
            close: data.close
          });
        }
      });

    /*
    * Request send by REST to get the real time values
    */
    const binanceSocket = new WebSocket('url_2');
    binanceSocket.onmessage = function(event) {
      const message = JSON.parse(event.data);
      // console.log(event.data);
      const candlestick = message.k;
      candleSeries.update({
        // @ts-ignore8
        time: candlestick.t / 1000,
        open: candlestick.o,
        high: candlestick.h,
        low: candlestick.l,
        close: candlestick.c
      });
    };
  }
}

这是html：

<mat-card class="dashboard-card">
  <div id="chart" fxFill></div>
</mat-card>

它工作得很好，但我有这个问题：我需要刷新页面或图表没有出现。

所以我试图让 SpinnerService 等待加载，但它不起作用。

如果这个问题看起来很愚蠢，我很抱歉，但我使用 angular 工作了 1 个月，而且有点复杂......^^

标签： javascriptangulartypescriptcharts