html - 切换/切换动态创建的组件

Question

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

<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

你可以使用 *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>