角度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>