动态 id 与 html 上的画布和角度答案

【问题标题】：Dynamic id with canvas on html and angular动态 id 与 html 上的画布和角度
【发布时间】：2021-12-14 00:40:07
【问题描述】：

我想在我的 html 中使用 angular 为我的报告（画布）设置一个动态 id，但如果你能帮助我，我会遇到错误，这是我的班级和我的 html 的代码

export class CardKPIReporteComponent implements OnInit {
  @BlockUI() blockUI: NgBlockUI;
  @Input() datos_kpi_reporte: any
  fetcher: any
  arrayListaKpis: any
  tituloreporte: any
  id: any = 1
  chartBienesUbicacion: any;
  constructor(private procesoOperacionService: ProcesoOperacionesService
  ) {

  }

  ngOnInit() {
    this.tituloreporte = this.datos_kpi_reporte.servicio_nombre
    this.id = this.datos_kpi_reporte.cont //this.id = 1
    this.Grafico2();

  }
  Grafico2() {
    // this.id = this.datos_kpi_reporte.cont

    var nombrechart = "Reporte" + this.datos_kpi_reporte.cont
    this.chartBienesUbicacion = new Chart(nombrechart, {
      type: 'pie',
      data: {
        labels: ['ENTREGADO', 'NO ENTREGADO', '1', '1'],
        datasets: [
          {
            label: 'Cantidad',
            data: ['1', '1', '1', '1'], // this.chartsTotal,
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor:
              'rgba(54, 162, 235, 1)',
            borderWidth: 1
          }
        ]
      },
      options: {
        title: {
          text: nombrechart,
          display: true
        },
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    });
  }
}

    <mat-card-content>
        <!--<app-alert></app-alert> -->
        <div class="row">
            <canvas id="Reporte{{ this.id }}"></canvas>
        </div>
    </mat-card-content>

我一直在尝试这种方式，但我收到此错误：“Chart.js:8459 无法创建图表：无法从给定项目获取上下文”

【问题讨论】：

您的画布 id 似乎有一个尾随空格，如果您删除它应该匹配并因此工作正常，这会变得很糟糕

标签： html angular canvas chart.js

【解决方案1】：

发生这种情况是因为您尝试在模板中设置 id 之前添加画布。您需要在模板中设置 ID，并在视图初始化后添加图表。

确保您实现AfterViewInit 并更新您的代码。

  ngOnInit() {
    this.tituloreporte = this.datos_kpi_reporte.servicio_nombre
    this.id = this.datos_kpi_reporte.cont
  }

  ngAfterViewInit() {
    this.Grafico2();
  }

【讨论】：