Javascript Angular 6多个动态图表.js未显示

我正试图为我的学士学位期末专题制作一个动态图表页面。首先，我有一个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]);

  }
}

现在就这样创建图表，以确保这只是前端的一个问题

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>

{{metric.nombre}}
{{metric.chart}

但结果如下 它应该是这样的，但是每一张画布上都有第一张图表。 同样重要的是，静态画布结果中的结果如下

<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>

---

希望这能对我有所帮助，如果我在路上犯了一些错误，我会为我的英语感到抱歉

我做的有点不同。我没有在

*ngFor

中创建画布标记，而是在组件代码处动态创建了图表画布

const wrapper = document.getElementById('chart-wrapper');
const newCanvas = document.createElement('canvas');
newCanvas.id = metric.canvas;
wrapper.appendChild(newCanvas);
const ctx = (newCanvas as HTMLCanvasElement).getContext('2d');
this.lineChart = new Chart(ctx, chartOptions);

---

我对此做了一个变通办法，每次添加、编辑或删除图表时都会刷新页面。这不是最好的结果，但它起了作用。

const wrapper = document.getElementById('chart-wrapper');
const newCanvas = document.createElement('canvas');
newCanvas.id = metric.canvas;
wrapper.appendChild(newCanvas);
const ctx = (newCanvas as HTMLCanvasElement).getContext('2d');
this.lineChart = new Chart(ctx, chartOptions);