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

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

切换.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>

6.
6.
6.
进出口银行


对

对

对

对

---

如果只需要打开一个面板，则此方法将起作用。在设置“flag”属性布尔值时，请使用number。它将保留面板id。将其设置为面板id，您的数据不需要其他属性：

类型脚本：

opened = -1;
toggle (index) {

    this.opened = index;
 }

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

HTML:

opened = -1;
toggle (index) {

    this.opened = index;
 }

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

。。。。
6.
...

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

在

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>

这是一顶帽子上的文字
6.
6.
6.
EXIF/span>


对

对

对

对

---

此外，在这种方法中，您不需要使用

toggle（）

方法和变量

opened

。

出于许多原因，最好使用服务来管理面板的状态。通常情况下，如果另一个组件需要切换状态，效果会更好。如果用户只想打开一个面板，则此操作效果会更好。从OP的问题中，我了解到每个单独面板的切换是必需的，类似于扩展面板，而不是accordion@Faisal是的，但我读到：“我想切换一个特定的面板”是的，没错，但在我看来，一个特定的面板可以是任何面板。也许OP可以澄清要求，尽管解决方案为+1。好的，但请参见上图。右侧视线上的面板也会打开。没有内容，你做了什么改变？好的，对不起，我错了。我在staffs周围有一个包装器div，但是你能告诉我为什么togglePanel[I]是一个布尔值吗？因为它存储打开/关闭状态，所以我们使用一个布尔值。