Угловой 2: сбой нескольких элементов

Question

У меня проблема, когда я рушится для элементов контента. Когда я нажимаю кнопку, показывается весь контент, но не только один элемент этого контента.

я следующий в этом примере Plunker

Это часть моей HTML:

  <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 

И добавить дополнительное логическое свойство моей JSON с API называется шоу по умолчанию установлена ​​в ложь.

[ 
{"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 верно.

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