Javascript 单击时显示/隐藏元素

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

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

---

当我有一个元素时，这对我所需要的很好。但我想用*ngFor显示其中的几个项目。当我这样做时，变量

status

将被共享，单击任何其他元素将切换所有元素。由于元素的创建是动态的，有没有办法将

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>


要显示或隐藏的信息

在您的
组件.ts
文件中，在每个数组
元素
中添加属性
状态
，并将
真
分配给
元素.status

然后使用
ngFor
在数组的
元素上循环，并使用
element.status
在
component.html
文件中切换specefic
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>


要显示或隐藏的信息


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