在ngFor循環中只切換一個特定的面板

你好我想切換一個特定的面板，但如果我點擊按鈕，其他對象的面板將被打開。我怎樣才能打開點擊面板？在ngFor循環中只切換一個特定的面板

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>

來源

2017-08-28 mogli mogli

您需要保存狀態的個人小組。目前，您只需設置一個切換所有面板的變量即可。

在你toggle.component.ts，添加一個變量來存儲每一個項目的狀態：你的HTML

togglePanel: any = {};

然後，更改到以下幾點：

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

來源

2017-08-28 12:45:19 Faisal

沒問題，但請參閱上面的圖片。右側的面板也被打開。沒有內容 –

你做了什麼改變？ – Faisal

好的，對不起，我的錯誤。我在工作人員周圍有一個包裝div –

如果你只需要一個面板打開，那麼這種方法會奏效。取而代之的是設置'標誌'屬性布爾值，使用數字。它將保持面板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" >

來源

2017-08-28 12:42:41 Vega

另外，由於諸多原因，使用服務來管理面板的狀態會更好。大多數情況下，如果另一個組件需要切換狀態會更好。 –

如果用戶只希望打開一個面板，這可以很好地工作。從OP的問題我明白，每個面板的切換是必需的，像擴展面板，而不是手風琴 – Faisal

@Faisal，真的，但我讀：'我想切換一個特定面板' – Vega

在ngFor循環中只切換一個特定的面板

回答

相關問題