html - Generera ett dynamiskt canvas-id för chart.js med Angular


Jag skapar en app som genererar diagram med Chart.js när en knapp trycks. Jag kan generera ett diagram när knappen trycks, men canvas-id:t fungerar bara när det är statiskt. Det jag skulle vilja göra är något sådant här:

     <canvas *ngFor="let t of type" 
             id = "{{t.id}}" 
             height="500">
     </canvas>

Det här är allt jag kan få att fungera just nu.

     <canvas id = "graphing1" 
             height="500">
     </canvas>

Genom att använda en div för att kontrollera ngFor-loopen, skriver den ut detta: graphing1

     <div *ngFor="let t of type" id = {{t.id}}>
             {{t.id}}
     </div>

Detta är Chart.js i TypeScript. Jag kontrollerade min variabel med en console.log och jag får samma resultat som div:en (graphing1).

console.log(this.type[this.count].id) //emits graphing1
for(this.count = 0; this.count < this.type.length; this.count++ ){
this.chart[this.count] = new Chart(this.type[this.count].id, { ... })

Så jag vet att variabeln sänder ut rätt information, men jag kan inte lista ut hur jag ska lägga denna information i ett canvas-id.