javascript - 如何在 Angular 2 中单击表格中的图标时显示其他行？

Question

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

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

如何在单击 (+) 按钮时展开表格中的多行。提前致谢。

Answer 1

对于 data-target 属性值，您可以使用 class 而不是 id。例如改变

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

到

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