Как отобразить несколько графиков пончик орех с помощью ngFor

Question

Иногда я хочу сгенерировать несколько кольцевых диаграмм, это будет 5, а иногда и 20, в зависимости от того, сколько я должен отображать кольцевых диаграмм, я пробовал какой-то уровень, я могу отображать карты bootstrap в 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>

Машинопись:

  @ViewChildren('yourId') myCharts: any;


 ngOnInit() {
   this.devicePressure()
  }


   devicePressure(){
     var device_air_data_chart = new Chart('myid', {
     type: 'doughnut',
     data: {
        labels: ['Air pressure'],
        datasets: [{
        label: 'Air pressure',            
        data: [30, 100],
        backgroundColor: [this.chartColors.airpressure,      this.chartColors.themecolor],
          borderColor: [this.chartColors.airpressure, this.chartColors.themecolor],
          borderWidth: 1
      }]
  },
  options: {
      responsive:true,
      circumference: Math.PI,
      rotation:Math.PI,
      cutoutPercentage:60,
      title: {
          display: true,
          text: 30 +' hPa',
          position: 'bottom'
       },
      legend: {
        display: false
      },
      tooltips: {
          enabled: false
     },
      animation: {
          animateScale: true,
          animateRotate: true
      }
  }
  });
 }