角度2：摺疊多個元素

Question

我有問題，當我崩潰的內容元素。當我按下按鈕時，顯示所有內容都顯示，但不僅僅是此內容的一個元素。

  <div *ngFor="#elem of apps"> 
       <div class="col-md-5"> 
        <div class="panel-heading"> 
        <strong> {{elem.name}}</strong> on {{elem.host}} 
        </div 
        <button type="button" (click)="isCollapsedContent= !isCollapsedContent"> 
       </div> 
      </div> 


      <div [collapse]="isCollapsedContent"> 
       <table class="table table-hover"> 
        <thead> 
        <tr class="header"> 
         <td>Property</td> 
         <td>Value</td> 
        </tr> 
        </thead> 
        <tbody> 
        <tr> 
         <td>app</td> 
         <td>{{elem.app}}</td> 

         <td>name</td> 
         <td>{{elem.name}}</td> 

         <td>host</td> 
         <td>{{elem.host}}</td> 
        </tr> 
        </tbody> 
       </table> 
      </div 

我從秀默認API稱爲添加額外的布爾屬性，以我的JSON設置爲false：

我通過這個例子Plunker

這是我的HTML的一部分下面。

[ 
{"app":"database_1", 
"host":"my_host1", 
"name":"name1", 
"show": false 
}, 
{"app":"database_2", 
"host":"my_host2", 
"name":"name2", 
"show": false 
}, 
{"app":"database_3", 
"host":"my_host3", 
"name":"name3", 
"show": false 
}, 
] 

如何顯示/隱藏只有一個元素？我可以將屬性添加到isCollapsedContent中，例如：

<div [collapse]="isCollapsedContent(elem.show)"> 

Answer 1

使用ngIf來測試elem.show是否爲true。

<div *ngFor="#elem of apps"> 
    <div class="col-md-5"> 
     <div class="panel-heading"> 
      <strong> {{elem.name}}</strong> on {{elem.host}} 
     </div> 
     <button type="button" (click)="elem.show = !elem.show"></button> 
    </div> 

    <table class="table table-hover" *ngIf="elem.show"> 
     <thead> 
     <td>app</td> 
     <td>Name</td> 
     <td>Host</td> 
     </thead> 
     <tbody> 
     <tr> 
      <td >{{elem.app}}</td> 
      <td >{{elem.name}}</td> 
      <td >{{elem.host}}</td> 
     </tr> 
     </tbody> 
    </table> 
    </div>