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>

Answer 2

我会在*ngIf='device.toShow'

中使用<app-detail-view> directiv

显然，在您使用toShow上的点击事件的方法中设置<app-standart-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;
    }
}

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

3 个答案: