Онлайн обновление данных в Angular

Question

У меня есть вызов к моему компоненту следующим образом:

<app-jq-chart
    [title]="chart.title"
    [data]="dataValues"
    [xAxisConfig]="{
      range: dataRange.x,
      title: chart.axisLabels.x
    }"
    [yAxisConfig]="{
      range: dataRange.y,
      title: chart.axisLabels.y
    }"
    [lineColor]="'green'"
  ></app-jq-chart>

В родительском компоненте (чей частичный шаблон показан выше) служба в реальном времени отправляет сообщения websocket, а в моем обработчике сообщений websocket явозьмите сообщение, извлеките из него данные и сохраните новые данные в dataValues:

  public subscribe() {
    this.rtdSubscription = this.rtdService.createObservableSocket().subscribe(
      {
        next: (message) => {
          // When a message comes in, if we have a handler for it, call that handler.
          const { payload, id } = JSON.parse(message);
          if (this.messageHandlers[id]) {
            this.messageHandlers[id].call(this, payload);  // the message handler stores the new dataValues
          }
        },
        error: err => console.warn(err),
      }
    );
  }

Вот метод из службы:

 public createObservableSocket(): Observable<any> {
    const url: string = environment.rtdServer;
    this.ws = new WebSocket(url);
    return new Observable(
      observer => {
        this.ws.onmessage = (event) => observer.next(event.data);
        this.ws.onerror = (event) => observer.error(event);
        this.ws.onclose = (event) => observer.complete();
        return () => this.ws.close(1000, 'The user disconnected');
      }
    );
  }

В шаблоне как сделатьЯ получаю [data]="dataValues" для обновления каждый раз, когда dataValues изменяется в шаблоне? Я знаю, что это как-то связано с наблюдаемыми факторами, но они так сильно болят мой мозг.

Обновление: я добавил это в свой конструктор компонента

  constructor(private rtdService: RealtimedataService) {
    this.liveData = new Observable(observer =>
      observer.next(this.dataValues)
    )
  }

И изменил шаблон на [data]="liveData | async"

На диаграмме теперь написано «нет данных», чтоЯ считаю, что библиотека JQuery говорит об очевидном. Это означает, что я сделал правильный первый шаг в создании liveData наблюдаемой. Я просто еще не разобрался, как в него вложить что-нибудь. Я подозреваю, что liveData на самом деле должен наблюдать что-то, что вызывает то, что у меня сейчас есть, для его обратного вызова / обработчика.

Кто-то спросил о том, где я сейчас обновляю dataValues:

handleNewStreamFrame(payload) {
    // If the message is for a different stream, exit.
    if (payload.streamGuid !== this.streamGuid) {
      return;
    }

    // Store the new data
    // IF we're not paused,
    // OR we have requested an update.
    if (!this.paused || this.hasRequestedUpdatedRange) {
      this.dataValues = payload.dataPoints;
    }

    // Update the graph's range
    // IF we've received this frame in response to a request for a new range.
    if (this.hasRequestedUpdatedRange) {
      this.hasRequestedUpdatedRange = false;

      const { xRange, yRange } = payload;
      this.updateRangeFromFrame(xRange, yRange);
    }

    this.draw();
  }

Thisэто обработчик сообщений websocketОбратите внимание на вызов draw() в конце: этот компонент изначально использовал свой холст для отображения графика, вызывая методы рисования холста, как вы видите. Теперь app-jq-chart (оболочка, которую я написал для библиотеки jquery jqChart) выполняет рисование с данными, которые я отправляю. Другими словами, моя первоначальная реализация была отличным способом отложить обучение правильному выполнению всего этого!