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 ....固定，它也应该是变量。这是真的吗？我应该尝试另一种方法吗？

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>;

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

在ngFor中定义hashtag变量

1 个答案: