Angular 2表格点击+按钮展开多行的实现方案咨询

Hey there! I see the issue here—your current setup uses the same id for multiple collapse rows, but HTML requires all IDs to be unique. That's why only the first row expands when you click the (+) button. Let's fix this in two ways, depending on whether you want to stick with Bootstrap's native collapse behavior or use a more Angular-friendly approach.

Fix 1: Adjust Bootstrap Collapse with Unique Classes #

Instead of reusing IDs, assign a shared class to all rows that should expand for a given button, then target that class with the button's data-target:

<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=".collapse-car" aria-expanded="false" aria-controls="collapseExample">
            (+)
          </button>
        </td>
        <td>Germany</td>
        <td>Car</td>
      </tr>
      <!-- Use shared class instead of duplicate ID -->
      <tr class="collapse collapse-car">
        <td></td>
        <td scope="row">Germany</td>
        <td>Check car</td>
      </tr>
      <tr class="collapse collapse-car">
        <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=".collapse-van" aria-expanded="false" aria-controls="collapseExample">
            (+)
          </button>
        </td>
        <td scope="row">Germany</td>
        <td>Van</td>
      </tr>
      <tr class="collapse collapse-van">
        <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=".collapse-truck" aria-expanded="false" aria-controls="collapseExample">
            (+)
          </button>
        </td>
        <td scope="row">Germany</td>
        <td>Truck</td>
      </tr>
      <tr class="collapse collapse-truck">
        <td></td>
        <td scope="row">Germany</td>
        <td>Check truck</td>
      </tr>
    </tbody>
  </table>
</div>

Key changes here:

• Replaced duplicate id attributes with shared classes like collapse-car, collapse-van
• Updated each button's data-target to use the class selector (note the . prefix, e.g., .collapse-car)
• This tells Bootstrap to toggle all elements with that class when the button is clicked

Fix 2: Angular-Friendly Toggle (Recommended) #

For a more maintainable approach that fits with Angular's data-binding paradigm, track expansion states in your component instead of relying on Bootstrap's native JS:

First, add this to your component class:

// Track expansion state for each vehicle type
expandedStates: { [key: string]: boolean } = {
  car: false,
  van: false,
  truck: false
};

toggleExpansion(type: string) {
  this.expandedStates[type] = !this.expandedStates[type];
}

// Keep your existing check method if needed
check(type: string) {
  // Your existing logic here
}

Then update your template:

<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" 
                  (click)="toggleExpansion('car'); $event.stopPropagation()"
                  [attr.aria-expanded]="expandedStates.car">
            {{ expandedStates.car ? '(-)' : '(+)' }}
          </button>
        </td>
        <td>Germany</td>
        <td>Car</td>
      </tr>
      <!-- Use Angular class binding to control collapse -->
      <tr [class.collapse]="!expandedStates.car">
        <td></td>
        <td scope="row">Germany</td>
        <td>Check car</td>
      </tr>
      <tr [class.collapse]="!expandedStates.car">
        <td></td>
        <td scope="row">Germany</td>
        <td>Check car2</td>
      </tr>

      <tr>
        <td scope="row">
          <button class="btn btn-primary" type="button" 
                  (click)="toggleExpansion('van')"
                  [attr.aria-expanded]="expandedStates.van">
            {{ expandedStates.van ? '(-)' : '(+)' }}
          </button>
        </td>
        <td scope="row">Germany</td>
        <td>Van</td>
      </tr>
      <tr [class.collapse]="!expandedStates.van">
        <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" 
                  (click)="toggleExpansion('truck'); $event.stopPropagation()"
                  [attr.aria-expanded]="expandedStates.truck">
            {{ expandedStates.truck ? '(-)' : '(+)' }}
          </button>
        </td>
        <td scope="row">Germany</td>
        <td>Truck</td>
      </tr>
      <tr [class.collapse]="!expandedStates.truck">
        <td></td>
        <td scope="row">Germany</td>
        <td>Check truck</td>
      </tr>
    </tbody>
  </table>
</div>

This approach gives you more control:

• You can easily modify the expansion logic (e.g., collapse other rows when one is opened)
• No dependency on Bootstrap's jQuery-based collapse JS, which plays better with Angular's change detection
• The button text automatically toggles between (+) and (-) based on the state

Either fix will let you expand multiple rows with a single button click. The Angular approach is better for long-term maintainability!

内容的提问来源于stack exchange，提问作者Nandha Kumar