在 ngFor 循环中仅切换一个特定面板

Question

您好，我想切换一个特定面板，但如果我单击该按钮，其他对象的面板将打开。我怎样才能打开点击的面板？

切换组件.ts

 opened:Boolean=false;
 toggle () {

    this.opened = !this.opened;
  }

超文本标记语言

<div class="main" *ngFor="let x of data; let i=index;">
<footer>

  <div class="icons">
  <span id="{{item.id}}" (click)="toggle()">6<i class="fa fa-users {{i}}" ></i></span>
  <span >6<i class="glyphicon glyphicon-picture"></i></span>
  <span >6<i class="glyphicon glyphicon-tag"></i></span>
  <div class="iconsRight pull-right">
  <span >EXIF<i class="glyphicon glyphicon-info-sign"></i></span>
  <span ><i class="fa fa-map-marker"></i></span>
  <span ><i class="fa fa-share-alt-square"></i></span>
  </div>
  </div>

</footer>

<div class="togglePanel{{item.id}}" *ngIf="opened" >
  <hr/>
  <ul class="toggleWrapper">
    <li>YES</li>
    <hr/>
    <li>YES</li>
    <hr/>
    <li>YES</li>
    <hr/>
    <li>YES</li>

  </ul>
</div>
 </div>

Answer 1

您需要保存各个面板的状态。目前，您只需设置一个变量来切换所有面板。

在您的 中toggle.component.ts，添加一个变量来存储每个项目的状态：

togglePanel: any = {};

然后，将您的 html 更改为以下内容：

<div class="main" *ngFor="let x of data; let i=index;">
    <footer>
        <div class="commentAgent">Text des Bewerters, der die Bearbeitung dieses Bildes vorgenommen hat</div>
        <div class="icons">
            <span id="{{item.id}}" (click)="togglePanel[i] = !togglePanel[i]">6<i class="fa fa-users {{i}}" ></i></span>
            <span>6<i class="glyphicon glyphicon-picture"></i></span>
            <span>6<i class="glyphicon glyphicon-tag"></i></span>
            <div class="iconsRight pull-right">
                <span>EXIF<i class="glyphicon glyphicon-info-sign"></i>/span>
                <span><i class="fa fa-map-marker"></i></span>
                <span><i class="fa fa-share-alt-square"></i></span>
            </div>
        </div>
    </footer>
    <div class="togglePanel{{item.id}}" *ngIf="togglePanel[i]">
        <hr/>
        <ul class="toggleWrapper">
            <li>YES</li>
            <hr/>
            <li>YES</li>
            <hr/>
            <li>YES</li>
            <hr/>
            <li>YES</li>
        </ul>
    </div>
</div>

此外，您不需要此方法中的toggle()方法和变量opened。