javascript - 单击时显示/隐藏元素

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

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

然后使用 ngFor 遍历数组的 element 并使用 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>