单击时显示/隐藏元素答案

【问题标题】：Show/Hide element on click单击时显示/隐藏元素
【发布时间】：2018-10-03 14:25:31
【问题描述】：

我正在尝试在单击标题时切换元素以显示/隐藏。到目前为止我有这种方法

<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 变量的范围限制为该元素？或者有更好的方法吗？

【问题讨论】：

标签： javascript css angular

【解决方案1】：

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

然后使用ngFor 遍历数组的elements 并使用element.status 在component.html 文件中切换特定的element，如下所示：

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

您需要在每个对象中添加一个 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>

【讨论】：