在 ngFor 中定义主题标签变量

Question

我正在尝试实现一个ngFor 循环来显示多个图表。它的数量将是可变的，所以我想使用一个循环来创建所有这些数组，具体取决于作为参数接收的数组数量：

<ion-list>
  <ion-card *ngFor="let canvas of canvasList">
    <ion-card-header class="backheader">
      Position {{canvas.position}}
    </ion-card-header>
    <ion-card-content>
      <canvas #name_{{canvas.position}}</canvas>
    </ion-card-content>
  </ion-card>
</ion-list>

但是我收到与使用#name_X有关的错误

正确的方法是什么？另外，我不知道我应该如何处理这个问题：

@ViewChild('sensor0Canvas') sensor0Canvas;

而这个：

this.sensor0Canvas.nativeElement...

在我的课堂上，我不需要0,1,2,3...固定，它也应该是可变的。这可能吗？我应该尝试另一种 aproach 吗？

Answer 1

就我而言，我希望

您为画布创建一个单独的组件，然后您将使用 @ViewChildren 和 QueryList 获得它。

@Component({
 selector: 'my-canvas',
 template: '<canvas></canvas>'
})
export class MyCanvasComponent {
 // do handle your canvas element here
}

在你循环中

<ion-list>
  <ion-card *ngFor="let canvas of canvasList">
    <ion-card-header class="backheader">
      Position {{canvas.position}}
    </ion-card-header>
    <ion-card-content>
      <my-canvas></my-canvas>
    </ion-card-content>
  </ion-card>
</ion-list>

并通过所有画布

 @ViewChildren(MyCanvasComponent) canvases: QueryList<MyCanvasComponent>;

它将返回所有画布组件的数组，然后您可以从此处直接调用它们的方法输入等。祝你好运。