как отображать многоточечные кольцевые диаграммы

Question

• 1000 в ngFor l oop, но не может динамически передавать идентификатор холста в файл ts.

HTML:

       <div class="row">
          <div *ngFor="let dev_data of devices  let i = index" class="col-md-3">
           <div class="card card-body">
             <h6>{{dev_data.device_name}}</h6>
             <canvas  id="canvas{{i}} #yourId" ></canvas>
          </div><br>
         </div>
       </div>

Typescript:

          import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
          import { Chart } from 'chart.js'
          import {ElementRef} from '@angular/core';

          @Component({
            selector: 'app-dev',
            styleUrls: ['./dev.component.scss'],
            templateUrl: './dev.component.html'
          })

         export class DevComponent implements OnInit {

          constructor(private elementRef: ElementRef) { }

              ngOnInit() {
                this.createChartsData()
               }

           @ViewChildren('yourId') myCharts: any;

          charts = [];

          createChartsData() {
          var array=[];
           for(var i =0; i<this.NumberOfSystems;i++)
           {
          var pie ={
          type: 'doughnut',
          data: {
          labels: ["Disks", "Mgmt", "Hardware", "FC", "Vols&Pols"],
          datasets: [
            {
              backgroundColor:["#008000","#008000","#008000","#008000","#008000"],
              data: [20,20,20,20,20]
           }
           ]
          },
         options: {
             title: {
             display: false
            },
        animations: true,
        tooltips: {
        enabled: true
         },
        legend: {
        display: true
        }
        }
      };
      array.push(pie);
      }
     this.createCharts(array);
      }
      createCharts(pieData){
      for(var j = 0; j<this.NumberOfSystems;j++)
     {

   console.log(this.myCharts)

   let htmlRef = this.elementRef.nativeElement.select(`#yourId`+j);
   var tempChart = new Chart(htmlRef,pieData[j]);
   this.charts.push(tempChart);
  }
 }

         }

Я думаю, что ошибка находится в переменной ** htmlRef **, когда я так console.log (htmlRef) ничего не печатает.

Затем я напечатал console.log (this.myCharts), я получаю эти данные:

введите описание изображения здесь

Я не знаю, где я застрял, Если бы какая-либо помощь была бы очень признательна.

Answer 1

 export class DevComponent implements AfterViewInit{
    ngAfterViewInit()
    {
      this.createChartsData()
    }
 }