如何在 Angular 中使用由 *ngFor 生成的 <canvas>

Question

我正在尝试在我的 Angular 应用程序中使用 *ngFor 指令创建一个包含 div 个元素的列表，其中包含 canvas 个元素。在特定 canvas 上的 (click) 事件之后，我想在相关索引处更新数组（我用 *ngFor 对其进行迭代）并在该 canvas 上绘制一个形状。

我试图在 *ngFor 循环中通过 #elementRef 设置对每个 canvas 的引用，并将引用传递给我的绘图函数 (myDrawingFunction(elementRef))，但在数组更新后，该函数无法正确定位要绘制的单击 canvas。

您有什么建议可以实现这一目标的最佳方法是什么？

非常感谢您的帮助！

Answer 1

我会尝试在您的 html 中使用索引，然后使用 elementRef 和特定的 id 来检索元素并对其进行操作 您还需要强制使用 trackBy 你的 dom 可能在你的数组更新后搞砸了:

<div *ngFor="let a of arrayOfIndexes;index as i; trackBy:trackByFn">
  <canvas attr.id="canvas-{{i}}" (click)="myDrawingFunction(i)"></canvas>
</div>

在你的 ts

...
arrayOfIndexes = [0, 1, 2, 3, 4, 5, 6]
...
constructor (private el:ElementRef){}
...
trackByFn(index){
  return (index);
}
myDrawingFunction(index:number){
  //here you retrieve your element by id eg: '#canvas-2'
  let canvas = <HTMLCanvasElement>this.el.nativeElement.querySelector('#canvas-' + index);
  let ctx = canvas.getContext('2d') //just an example
  ...
}

...

StackBlitz demo

参考

ngForOf

如何在 Angular 中使用由 *ngFor 生成的 <canvas>

How to use <canvas> generated with *ngFor in Angular

javascript

angular

dom

canvas

ngfor