IONI C v4: другое поведение при запуске и обновление sh страницы, содержащей диаграмму. js

Question

Я занимаюсь разработкой приложения IONI C v4 с панелью мониторинга с несколькими динамическими c диаграммами, которые обновляются каждые 5 секунд. Я использую диаграмму. js. Графики создаются в ionViewDidEnter, и все хорошо, когда я запускаю приложение. Наоборот, если я пытаюсь обновить sh страницу (перезагрузить браузер), диаграммы не отображаются. В частности, такова последовательность запуска приложения:

• конструктор
• ngOnInit ()
• ionViewWillEnter
• Получение информации из удаленной БД
• ionViewDidEnter
• Графики показаны правильно

это последовательность, когда я обновляю sh страницу:

• конструктор
• ngOnInit
• ionViewWillEnter
• Запуск извлечения информации из удаленной БД
• ionViewDidEnter
• Диаграммы не отображаются
• Конец получения информация из удаленной БД

Я попытался переместить код в ionViewWillEnter и ngOnInit безуспешно. Есть ли кто-нибудь, кто может дать мне некоторую подсказку? Почему поведение отличается?

Это значительная часть кода:

import { ... } from ...;
import { DbHandlingService } from "../../SERVICES/db-handling.service";
import { Chart } from 'chart.js';


@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.page.html',
  styleUrls: ['./dashboard.page.scss'],
})
export class DashboardPage implements OnInit {

  ...

  // Plot
  @ViewChildren("lineCanvas") lineCanvasArray: QueryList<ElementRef>;


  constructor(public dbHandling: DbHandlingService) {

    console.log(" constructor");
  }


  ngOnInit() { console.log("ngOnInit"); }


  ionViewWillEnter() {

    console.log("ionViewWillEnter");

    this.menu.enable(true);

    console.log("ionViewWillEnter);
    this.dbHandling.getDevicesList(this.email).then(devices => {

      this.devices = devices

      let lineChartA = this.lineCanvasArray.toArray();

      for (let device of this.devices) {

        ...

        this.mqttService.subscribe(device);
      }
    });

    this.startListen();
  }


    ionViewDidEnter() {
      console.log("ionViewDidEnter");

      let lineChartA = this.lineCanvasArray.toArray();

      //*
      var index = 0;
      for (let device of this.devices) {
        console.log("lineChartA Chart num " + index);
        device.lineChart = new Chart(lineChartA[index++].nativeElement, {
          type: "line",
          options: {
            legend: {
              labels: {
                usePointStyle: true
              }
            },
            scales: {
              yAxes: [{
                beforeFit: function (scale) {
                  //console.log(scale)  // See what you can set in scale parameter
                  // Find max value in your dataset
                  let maxValue = 0
                  let minValue = 100
                  if (scale.chart.config && scale.chart.config.data && scale.chart.config.data.datasets) {
                    scale.chart.config.data.datasets.forEach(dataset => {
                      if (dataset && dataset.data) {
                        dataset.data.forEach(value => {
                          if (value > maxValue) { maxValue = value }
                          if (value < minValue) { minValue = value }
                        })
                      }
                    })
                  }
                  // After, set max option !!!
                  var stepUp = maxValue % 20;
                  var stepDown = minValue % 20;
                  scale.options.ticks.max = maxValue + (20 - stepUp);
                  scale.options.ticks.min = minValue - (20 + stepDown);
                },
                id: 'A',
                type: 'linear',
                position: 'left',
                scaleLabel: {
                  display: true,
                  labelString: 'T°',
                  //min: Math.min.apply(this, this.devices.pitHighValues) - 5,
                  //max: Math.max.apply(this, this.devices.pitHighValues) + 5
                },
                ticks: {
                  stepSize: 20,
                  suggestedMin: 0,
                  suggestedMax: 120,
                }
              }, {
                id: 'B',
                type: 'linear',
                position: 'right',
                scaleLabel: {
                  display: true,
                  labelString: 'FAN %'
                },
                ticks: {
                  max: 120,
                  min: -20,
                  callback: function (value, index, values) { return value + '%'; },
                },

                gridLines: { color: "rgba(0, 0, 0, 0)", }
              }],
              xAxes: [{
                ticks: {
                  display: true,
                  autoSkip: true,
                  maxTicksLimit: 8
                }
              }]
            }
          },         
          data: {
            labels: [],
            datasets: [
              {
                ...
              },
              {
                ...
              },
              {
                ...
              },
              {
                ...
              }
            ]
          }
        });
      }
    }
  }