Angular/Bootstrap - 切换/折叠具有特定 ID 的表行？答案

【问题标题】：Angular/Bootstrap - Toggle/collapse table row with specific ID?Angular/Bootstrap - 切换/折叠具有特定 ID 的表行？
【发布时间】：2021-04-06 12:28:28
【问题描述】：

目前在 Angular 和 Bootstrap 中工作，并且在处理表格和折叠行时遇到了一些困难。

我从数据库中导入数据，并将它们输出到我使用 *ngFor 生成的表和 ng-container 内的两行中。我想用第一行内的切换按钮折叠第二行。但是，当我使用引导程序中的折叠功能时，当我单击按钮时，所有行都会打开，而不仅仅是我想要定位的行。有没有一种好方法可以为行提供唯一 ID，以便 Angular 知道要折叠哪一行？

在下面的代码中，我在第一行创建了一个带有 data-target="#collapseRow" 的 + 按钮，在第二行我给它一个 ID (id="collapseRow")

  <table class="table">
    <thead>
      <tr>
        <th scope="col">{{ 'Sales.Location' | translate }}</th>
        <th scope="col">{{ 'Sales.CreationDate' | translate }}</th>
        <th scope="col">{{ 'Sales.MachineNumber' | translate }}</th>
        <th scope="col">{{ 'Sales.Units' | translate }}</th>
        <th scope="col">{{ 'Sales.Price' | translate }}</th>
        <th scope="col">{{ 'Sales.AmountPaid' | translate }}</th>
        <th scope="col">{{ 'Sales.PaymentMethod' | translate }}</th>
        <th scope="col">{{ 'Sales.Status' | translate }}</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let sale of sales">
        <tr>
          <td>{{sale.locationId}}</td>
          <td>{{sale.creationTimestamp | date:'medium'}}</td>
          <td>{{sale.machineNumber}}</td>
          <td>{{sale.units}}</td>
          <td>{{sale.price | currency:'EUR'}}</td>
          <td>{{sale.amountPaid | currency:'EUR' }}</td>
          <td>
            <div 
              *ngIf="sale.accountPayments.length">
              {{'Sales.PaymentMethod.Account' | translate }}
                <span 
                  class="badge badge-primary ml-1"
                  type="button" 
                  data-toggle="collapse" 
                  data-target="#collapseRow" 
                  aria-expanded="false" 
                  aria-controls="collapseRow"
                >+</span>
            </div>
            <div *ngIf="isElectronicPaymentSuccess(sale)">{{'Sales.PaymentMethod.Electronic' | translate }}</div>
            <div *ngIf="isCashPaymentSuccess(sale)">{{'Sales.PaymentMethod.Cash' | translate }}</div>
          </td>
          <td>
            <span
              class="badge"
              [ngClass]="{'badge-success' : sale.saleStatus === 'SUCCESS',
                        'badge-danger' : sale.saleStatus === 'ABORTED'}"
            >{{sale.saleStatus}}
            </span>
          </td>
        </tr>
        <tr class="bg-light collapse" id="collapseRow">
          <td colspan="10">
            <div><span class="font-weight-bold">{{ 'Sales.AccountPayments.CustomerLocalId' | translate }}:</span>{{sale.accountPayments.customerLocalId}}</div>
            <div><span class="font-weight-bold">{{ 'Sales.BonusAmount' | translate }}:</span>{{sale.creditBonusAmount | currency:'EUR'}}</div>
            <div><span class="font-weight-bold">{{ 'Sales.RechargedBy' | translate }}:</span>{{sale.creditRechargeCustomer?.firstName}} {{sale.creditRechargeCustomer?.lastName}}</div>
          </td>
        </tr>
      </ng-container>
    </tbody>
  </table>

【问题讨论】：

#collapseRow 必须是唯一的。目前所有可折叠的行都具有相同的 ID。无论如何，ID 在 HTML 中必须是唯一的。

标签： html angular typescript datatables angular-ui-bootstrap

【解决方案1】：

将您的按钮更改为：

<span 
    class="badge badge-primary ml-1"
    type="button" 
    data-toggle="collapse" 
    data-target="#collapseRow{{sale.id}}" 
    aria-expanded="false" 
    aria-controls="collapseRow"
>+</span>

和你的行：

<tr class="bg-light collapse" id="collapseRow{{sale.id}}">
    <td colspan="10">
    <div><span class="font-weight-bold">{{ 'Sales.AccountPayments.CustomerLocalId' | translate }}:</span>{{sale.accountPayments.customerLocalId}}</div>
    <div><span class="font-weight-bold">{{ 'Sales.BonusAmount' | translate }}:</span>{{sale.creditBonusAmount | currency:'EUR'}}</div>
    <div><span class="font-weight-bold">{{ 'Sales.RechargedBy' | translate }}:</span>{{sale.creditRechargeCustomer?.firstName}} {{sale.creditRechargeCustomer?.lastName}}</div>
    </td>
</tr>

如果您没有 ID，请使用其他 ID，只要它是唯一的。

【讨论】：