Question

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

toggle.component.ts

 opened:Boolean=false;
 toggle () {

    this.opened = !this.opened;
  }

HTML

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

Answer 2

如果只需要打开一个面板，则此方法可行。而不是设置你的标志＆＃39; property boolean，使用数字。它会保留面板ID。将其设置为面板ID，您不需要在数据上添加其他属性：

<强>打字稿：

opened = -1;
toggle (index) {

    this.opened = index;
 }

<强> HTML：

....
  <span id="{{item.id}}" (click)="toggle(item.id)">6<i class="fa fa-users {{i}}" ></i>
...

<div class="togglePanel{{item.id}}" *ngIf="opened===item.id" >

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

2 个答案: