ngForループ内の特定のパネルを1つだけ切り替えます。

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

個々のパネルの現在、すべてのパネルを切り替える変数を1つだけ設定しています。以下に、あなたのhtmlを、次に

togglePanel: any = {}; 

変更：あなたのtoggle.component.tsで

、すべての項目の状態を格納する変数を追加します。また

<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

開いただけで1つのパネルが必要な場合は、このメソッドは動作します。あなたの 'フラグ'プロパティブール値を設定する代わりに、numberを使用します。それはパネル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" >