Угловой 6-кратный динамический Charts.js не отображается

Question

Я пытаюсь создать динамическую страницу с графиками для моего финального проекта на моем бакалавре.Прежде всего, у меня есть база данных метрик в SQL, которая получается таким образом.

getmetrics(flag = 2) {
  this.metricService.getmetrics()
  .subscribe(res => {
    this.metricService.metrics = res as metric[];
    for (let metric of this.metricService.metrics) {
      metric.canvas = "canvas" + metric.id_metric;
    }
    if (flag == 2) {
      for (let i = 0; i < this.metricService.metrics.length; i++) {
        //here we create the chart with createCharts(metric);
        this.metricService.metrics[i] = this.createCharts(this.metricService.metrics[i]);

  }
}

Флаг используется для создания диаграмм после инициализации представления,

ngOnInit() {
  this.getmetrics(1);
}
ngAfterViewInit() {
  this.getmetrics(2);
}

Исоздать диаграммы сейчас выглядит так, чтобы убедиться, что это проблема только во внешнем интерфейсе.

createCharts(metric) {
    metric.chart = new Chart(metric.canvas, {
    type: 'bar',
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
        label: '# of Votes',
        data: [12, 24, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });
  return metric;
}

И HTML выглядит так:

    <div class="col-6 metric" *ngFor="let metric of metricService.metrics">
        <h5>{{metric.nombre}}</h5>
        <div *ngIf = "metric.canvas">
            <canvas id="{{metric.canvas}}">{{ metric.chart }}</canvas>
        </div>
    </div>

Но результат следующий Изображение результата без статической диаграммы И так должно быть, но с первой диаграммой на каждом другом холсте. Изображение результата со статической диаграммой Также важно сказать, что результатом в результате статического холста является следующий

<canvas _ngcontent-c2="" id="canvas0" width="450" height="225" class="chartjs-render-monitor" style="display: block; width: 450px; height: 225px;"></canvas>

И результат в динамическом (ицель) холст

<canvas _ngcontent-c2="" id="canvas2"></canvas>

Надеюсь, что это может помочь, и извините за мой английский, если я сделал какую-то ошибку в пути.