動的に作成されたコンポーネントの切り替え/切り替え

Question

動的に作成された親コンポーネント内に2つの子コンポーネントがあります。 私の目標は、このコンポーネントを切り替えたり切り替えることです。

<div *ngFor="let device of devices; let i = index"> 
    <app-standart-view [value]="device.value" (click)="SWICH TO DETAIL-VIEW"></app-standart-view> 
    <app-detail-view [value]="device.value" (click)="SWICH TO STD-VIEW"></app-detail-view> 
</div> 

シナリオ：私は<app-standart-view>をクリックすると

それは自分自身を隠し、<app-detail-view>を表示します。しかし、そのクリックされたコンポーネントの場合にのみindex = i。残りの部分は変更しないでください。

どうすればいいですか？

は

が

Answer 1

私はあなたの<app-detail-view>

で*ngIf='device.toShow' directivを使用して、明らかにあなたが<app-standart-view>

Answer 2

することができます上のクリックイベントATER使用あなたMethodeの中toShowの適切な値を設定したいありがとう使用する* ngIfファイルでは、変数を定義する必要があります。

hide:boolean =true 
switchView(){ 
this.hide=!this.hide 
} 

そして、html特定のインデックスについては

<app-standart-view [value]="device.value" *ngIf= "hide" (click)="switchView()"></app-standart-view> 
    <app-detail-view [value]="device.value" *ngIf= "!hide" (click)="switchView()"></app-detail-view> 

Answer 3

<div *ngFor="let device of devices; let i = index"> 
    <app-standart-view [value]="device.value" *ngIf="show" (click)="swichView(i)"></app-standart-view> 
    <app-detail-view [value]="device.value" *ngIf="!show" (click)="swichView(i)"></app-detail-view> 
</div> 

に、あなたはこのコードは、すべての子コンポーネントを切り替え指標を渡すと、インデックス

show:boolean = true; 
swichView(index:number){ 
    if(index === 1){ 
     this.show = !this.show; 
    } 
}