javascript - 切换按钮 - 显示/隐藏信息

Question

有人可以帮助我在单击图标(箭头)时隐藏/显示信息吗？我尝试使用javascript，虽然这不是最好的方法，但它也不起作用。

我打算通过单击图像 https://img.icons8.com/android/24/000000/down.png ，下面的信息将被隐藏，并且该图像将更改为向上箭头的图像https://img.icons8.com/android/24/000000/up.png

当您单击向上的 sta 时，信息会再次出现，并且同一图像将被向下的箭头图像替换。

有人可以帮助我吗？

DEMO - STACKBLITZ

代码

<div *ngFor="let item of data">
    <div class="d-flex flex-row"
        style="align-items: center;margin-top: 8px;padding: 16px;background: #E8EEF5 0% 0% no-repeat padding-box;border-radius: 8px;">
    <div>
        <img src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
        <img src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>
  </div>
    <div><span style="margin-left: 8px;" class="selectioname">{{item.name}}</span></div>
    <div style="margin-left:auto">
        <img src="https://img.icons8.com/material-outlined/24/000000/close-window.png"/>
  </div>
    </div>
    <div class="d-flex flex-row"
                style="display: flex; align-items: center; margin-top: 8px;padding: 8px;border-bottom: 1px solid #CACED5;">
        <div class="">
            <img src="https://img.icons8.com/bubbles/50/000000/check-male.png"/>
    </div>
        <div>
            <span style="margin-left: 8px;">@{{item.name}}</span>
            <div>{{item.date}}</div>
        </div>
        <div style="margin-left:auto">
            <img src="https://img.icons8.com/material/24/000000/filled-trash.png"/>
    </div>
        </div>
</div>

Answer 1

首先，删除 hide1 类的样式。最好依赖 Angular 中的 *ngIf 指令:

<img *ngIf="item.shown" src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
<img *ngIf="!item.shown" src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>

然后实现方法来切换显示属性:

toggle(item) {
  item.shown = !item.shown;
}

现在您必须将此方法绑定(bind)到包装箭头的 div 上的 DOM 事件:

<div (click)="toggle(item)">
</div>

最后一步是在您想要切换的其他元素上使用 *ngIf 指令:

 <div class="d-flex flex-row" *ngIf="item.shown" ...