Angular 2: collapse mehrere Element

Question

Ich habe ein Problem, wenn ich für Inhaltselemente zusammenbrechen werde. Wenn ich den Knopf drücke, werden alle Inhalte angezeigt, aber nicht nur ein Element dieses Inhalts.

ich folgende von diesem Beispiel Plunker

Dieser Teil meiner html ist:

  <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 

Und ich hinzufügen, zusätzliche boolean-Eigenschaft auf meine JSON von API zeigen Standard genannt false gesetzt.

[ 
{"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 
}, 
] 

Wie kann ich nur ein Element anzeigen/ausblenden? Kann ich Immobilie isCollapsedContent zum Beispiel hinzufügen:

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

Answer 1

Verwenden ngIf zu testen, ob elem.show wahr ist.

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