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を必要としませんそれも可変でなければならない。これは可能ですか？私は別のアプローチを試みるべきですか？

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

を介してすべてのキャンバスを取得するそれは、あなたが直接からなど、そのメソッドの入力を呼び出すことができ、すべてのキャンバスのコンポーネントの配列を返します。ここに。がんばろう。