Question

当我单击标题时，我试图切换显示/隐藏的元素。到目前为止，我有这种方法

<div class="parent" (click)="status=!status" [ngClass]="status ? 'hide' : 'display'">
   <div class="child">
     <p>Info to show or hide</p>
   </div>
</div>

在CSS文件上，我有这个

.hide .child {
  display: none;
}

当我只有一个元素时，这可以满足我的需求。但是我想用* ngFor显示其中几个项目。当我这样做时，变量status将被共享，单击任何其他元素将切换所有这些元素。由于元素的创建是动态的，有没有办法将status变量的范围限制为仅该元素？还是有更好的方法呢？

Answer 1

您在每个对象中都需要一个status变量

<div *ngFor="let item of items" class="parent" (click)="item.status=!item.status" [ngClass]="item.status ? 'hide' : 'display'">
   <div class="child">
     <p>Info to show or hide</p>
   </div>
</div>

Answer 2

在您的component.ts文件中，在每个数组status中添加属性element并将true分配给element.status。

然后使用element在数组ngFor上循环，并使用element.status在您的element文件中如下切换特定的component.html：

<div *ngFor="let element of myArray" class="parent" (click)="element.status=!element.status" [ngClass]="element.status ? 'hide' : 'display'">
    <div class="child">
        <p>Info to show or hide</p>
    </div>
</div>

点击时显示/隐藏元素

2 个答案: