角度2のコンポーネントテンプレートをループする方法

Question

@Input（）：Objectを取り込むマスターコンポーネントを作成しています。このオブジェクト内では、* ngForを使用してループされるコンポーネントの配列を含める必要があり、コンポーネントのテンプレートはイオン2スライド内に配置する必要があります。私は何の提案も無用にこの多くの異なる方法を達成しようとしましたか？

Answer 1

私は何をしようとしているのと似たようなことをしました。しかし、私は各コ​​ンポーネントの他の入力値を持っていましたが、ユーザーのやり取りに基づいて条件付きのスライドに入っていました。

最初のスライドは、整数次のクリックイベントが[OK]をクリックし法はそう

ようだっ

<ion-item (click)="gotoInputDetails(1)" 

たので、呼ばれるであろう成分決定

<ion-item (click)="gotoInputDetails(0)" 

クリックイベントを有していました

gotoInputDetails(input: number) { 
/** 
* There is only an idx 0 1 on slides. 
* idx 1 for slide is based on this.showInput which determines which input edit component to show. *ngIf="showInput === 0" 
* 0 = textbox 
* 1 = select 
* 2 = date 
* 3 = range 
* 4 = toggle 
*/ 
this.showInput = input; 
this.slides.lockSwipes(false); 
this.slides.slideTo(1); 
} 

これは常に2番目のスライダーにスライドするだけですが、どのコンポーネントが表示されるのですかその後、this.showInputのオフに基づいているので、第二スライドだから、それは2をスライドさせるスライドし、次に示すコンポーネントはに移動した項目でクリックイベントに渡されたパラメータに基づいているので、

<ion-slide> 
    <!-- Textbox --> 
    <page-form-add-input-text *ngIf="showInput === 0"></page-form-add-input-text> 
    <!-- Select --> 
    <page-form-add-input-select *ngIf="showInput === 1"></page-form-add-input-select> 
    <!-- Date --> 
    <page-form-add-input-date *ngIf="showInput === 2"></page-form-add-input-date> 
    <!-- Range --> 
    <page-form-add-input-range *ngIf="showInput === 3"></page-form-add-input-range> 
    <!-- Toggle--> 
    <page-form-add-input-toggle *ngIf="showInput === 4"></page-form-add-input-toggle> 
</ion-slide> 

のように私のすべてのコンポーネントがあります2番目のスライド。

私の場合、スライド上の各コンポーネントはかなり複雑なので、それぞれ独自のロジックを持つようにコンポーネントを分けたかったのです。これは、マスターコンポーネントで何を求めているかとは少し異なりますが...私はうまくいきません。おそらくもっと良い方法があります。

また、4つのコンポーネントがあり、4番目のスライド（3番目のインデックス）に移動したいと思っていた場合、その前にコンポーネントが渡されていたので、ユーザーは1秒間私が望んでいない他のコンポーネントのビュー