Question

以下是component.html页面

<tr *ngFor="let item of items;let i=index">
       <td><b>{{item.name}}</b><br/>{{item.desc}}</td>
       <td>
          <canvas id="canvas" baseChart #kpichart></canvas>
       </td>
    </tr>

下面是component.ts文件

   @ViewChild('kpichart') kpichart: ElementRef; 
   let lineCtx = this.kpichart.nativeElement.getContext('2d');
   var myChart = new Chart(lineCtx, {
      type: 'line',
     data: {
         labels: this.lineChartLabels,
         datasets:this.lineChartData
       }
   });

无法在页面中显示多个图表。如何使用* ngFor循环画布元素图表请帮忙

先谢谢

Answer 1

创建一个单独的组件并将id传递给组件并绘制图表。

component.html

declare begin -- alter table add new column exception when others then dbms_output.put_line('Exception adding new column'); -- nothing to rollback as failed on first step end; -- update copy data to new column exception when others then dbms_output.put_line('Exception when populating new column'); -- delete any data in new column if committed in blocks -- drop new column end; -- drop old column exception when others then dbms_output.put_line('Exception when dropping old column'); -- ? not sure if you can rollback a failed drop column -- delete any data in new column if committed in blocks -- drop new column end; end; /

并在

儿童component.ts

<canvas-chart [canvas]=item.item_id></canvas-chart>

儿童component.html

 @Input() canvas;
 @ViewChild('kpichart') kpichart: ElementRef;

Angular2中的Loop Canvas元素

1 个答案: