Html 切换/切换动态创建的组件

我在动态创建的父组件中有两个子组件。 我的目标是在这些组件之间切换

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

场景：

当我单击

时，它会隐藏自己并显示

。但仅适用于单击的组件

index=i

。其余的不应该改变

我该怎么做

---

谢谢你

我会在你的

中使用
*ngIf='device.toShow'
directiv

显然，在方法中设置适当的
toShow
值，即在
上单击事件时使用*ngIf，则必须在ts文件中定义一个变量

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>


我不想切换元素
1
。我的目标是切换单击的元素。此代码切换所有子组件。我的目标是只切换单击的元素。因此，如果我单击应用程序标准视图，它应该隐藏自己，但应用程序详细信息视图不会发生任何变化。当我单击
应用程序标准视图
时，它应该隐藏自己并显示
应用程序详细信息视图
，反之亦然。但是：仅针对单击的索引。
<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;
    }
}