Угловой компонент необходимо обновить после добавления данных

#javascript #angular #typescript #charts

#javascript #угловой #typescript #Диаграммы

Вопрос:

Мне очень сложно это решить. У меня есть компонент, который получает данные Json с 2 разных URL-адресов для создания диаграммы:

  • 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 месяца, и это немного сложно … ^^

Комментарии:

1. Как выглядит ваш html-шаблон?

2. Я поместил его в начальный пост, но он очень простой. Диаграмма инициализируется в <div class=»chart»>

3. я вижу Candleeries и директиву fxFill. Что они делают?

4. candleeries просто добавляют данные на график. fxFill — это визуальное свойство angular material для адаптации содержимого.

5. Вы не привязали какое-либо свойство вашего класса компонентов к своему шаблону. Обновление служебных данных не изменит ваш шаблон, если вы не свяжете некоторые переменные внутри вашего шаблона