Javascript 如何在angular 2中单击表格中的图标时显示其他行？

单击每行第一列中的（+）按钮时，应展开其他行。但是，单击（+）按钮，我只能扩展到一行。如何在单击（+）按钮时展开表中的多行。提前谢谢

<div>
    <table class="table table-striped table-bordered">
    <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">Country</th>
      <th scope="col">Vehicle Type</th>
    </tr>
    </thead>
    <tbody>
    <tr (click) = "check('car')">
      <td scope="row">
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExamplecar" aria-expanded="false" aria-controls="collapseExample">
    (+)
    </button>
      </td>
      <td>Germany</td>
      <td>Car</td>
    </tr>
    <tr class="collapse" id="collapseExamplecar">
      <td></td>
      <td scope="row" >Germany</td>
      <td>Check car</td>
    </tr>
    <tr class="collapse" id="collapseExamplecar">
      <td></td>
      <td scope="row" >Germany</td>
      <td>Check car2</td>
    </tr>
    <tr >
       <td scope="row">
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExamplevan" aria-expanded="false" aria-controls="collapseExample">
    (+)
    </button>
      </td>
      <td scope="row" >Germany</td>
      <td>Van</td>
    </tr>
     <tr class="collapse" id="collapseExamplevan">
       <td></td>
      <td scope="row" >Germany</td>
      <td>Check Van</td>
    </tr>
    <tr (click) = "check('truck')">
      <td scope="row">
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExampletruck" aria-expanded="false" aria-controls="collapseExample">
    (+)
  </button>
      </td>
      <td scope="row">Germany</td>
      <td>Truck</td>
    </tr>
     <tr class="collapse" id="collapseExampletruck">
       <td></td>
      <td scope="row" >Germany</td>
      <td>Check truck</td>
    </tr>
  </tbody>
</table>
</div>

国家
车型
(+)
德国
汽车
德国
检车
德国
检查车辆2
(+)
德国
厢式货车
德国
检查车
(+)
德国
卡车
德国
检查车

---

如何在单击（+）按钮时展开表中的多行。提前感谢。

对于

数据目标

属性值，您可以使用

类

而不是

id

。比如说改变

<div>
    <table class="table table-striped table-bordered">
    <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">Country</th>
      <th scope="col">Vehicle Type</th>
    </tr>
    </thead>
    <tbody>
    <tr (click) = "check('car')">
      <td scope="row">
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExamplecar" aria-expanded="false" aria-controls="collapseExample">
    (+)
    </button>
      </td>
      <td>Germany</td>
      <td>Car</td>
    </tr>
    <tr class="collapse" id="collapseExamplecar">
      <td></td>
      <td scope="row" >Germany</td>
      <td>Check car</td>
    </tr>
    <tr class="collapse" id="collapseExamplecar">
      <td></td>
      <td scope="row" >Germany</td>
      <td>Check car2</td>
    </tr>
    <tr >
       <td scope="row">
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExamplevan" aria-expanded="false" aria-controls="collapseExample">
    (+)
    </button>
      </td>
      <td scope="row" >Germany</td>
      <td>Van</td>
    </tr>
     <tr class="collapse" id="collapseExamplevan">
       <td></td>
      <td scope="row" >Germany</td>
      <td>Check Van</td>
    </tr>
    <tr (click) = "check('truck')">
      <td scope="row">
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExampletruck" aria-expanded="false" aria-controls="collapseExample">
    (+)
  </button>
      </td>
      <td scope="row">Germany</td>
      <td>Truck</td>
    </tr>
     <tr class="collapse" id="collapseExampletruck">
       <td></td>
      <td scope="row" >Germany</td>
      <td>Check truck</td>
    </tr>
  </tbody>
</table>
</div>

<button ... data-target="#collapseExamplecar" >
...
<tr class="collapse" id="collapseExamplecar">
...
<tr class="collapse" id="collapseExamplecar">

...
...

到

...
...

你能发布你的js代码吗？实际上你的问题与Bootstrapkindly-up有关。如果问题有有用的内容，请投票@albert。