テンプレートの配列を作成する方法

Question

タイムラインを作成する必要があります。このために私はカードを繰り返す必要があります。

私は既に作成し、私が望むカードのテンプレートを表示することができます。

これを繰り返す必要があります。私は今BDを持っていないので、最初はアプリケーションのフロントエンドを作成していますので、今は単純な配列を作成して繰り返します私のテンプレートx回。父TSは、今のコードを持っていない、これはHTMLに直接子どものTSを使用することによって、純粋に取り組んでいる

<ion-list> 
    <enviouTemplate [cardEnviou]="enviouCard" *ngIf="buttonClicked1"></enviouTemplate> 
    <recebeuTemplate [cardRecebeu]="recebeuCard" *ngIf="buttonClicked2"></recebeuTemplate> 
    </ion-list> 

：

は、これが私のHTMLです。

どのようにカードを繰り返すことができますか？

カードが2種類あるため、ngIfがありますので気にしないでください。

ありがとうございます！

Answer 1

私はその本のように、今、それを動作させるために管理：

HTML：（のみテスト用）

<ion-list *ngFor="let card of cards"> 
    <enviouTemplate [cardEnviou]="card" *ngIf="buttonClicked1"></enviouTemplate> 
    <recebeuTemplate [cardRecebeu]="card" *ngIf="buttonClicked2"></recebeuTemplate> 
</ion-list> 

親TS：

cards : any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 

しかし、私の質問は今あります私が読んでいるものについては、そのイオンリストの中でngForを使うのは良い習慣ではありません。

どのようにhtmlをビルドする必要がありますか？

ボタンが選択されたときにのみ表示される2つのタイムラインがあるため、ngForを使用する必要があります。アプリケーションがngForとngIfを同じ要素で受け付けないことがわかります。 ..