Angular 2：折叠多个元素答案

【问题标题】：Angular 2: collapse multiple elementAngular 2：折叠多个元素
【发布时间】：2016-12-09 04:41:21
【问题描述】：

我在折叠内容元素时遇到问题。当我按下按钮时，显示所有内容都显示，但不只是该内容的一个元素。

我按照这个例子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

我从名为 show default set false 的 API 向我的 JSON 添加了额外的布尔属性。

[
{"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)">

【问题讨论】：

标签： angular collapse angular-template

【解决方案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>

【讨论】：

div折叠后打不开。