Angular/Bootstrap - Toggle/collapse table 具有特定 ID 的行？

Question

目前在 Angular 和 Bootstrap 工作，在 table 和折叠行方面遇到一些困难。

我从数据库导入数据并将它们输出到我用 *ngFor 生成的 table 和 ng-container 中的两行。我想用第一行内的切换按钮折叠第二行。但是，当我使用 bootstrap 中的折叠功能时，单击按钮时所有行都会打开，而不仅仅是我想要定位的行。有没有一种好方法可以为行提供唯一 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>

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

Angular/Bootstrap - Toggle/collapse table 具有特定 ID 的行？

Angular/Bootstrap - Toggle/collapse table row with specific ID?

html

datatables

typescript

angular-ui-bootstrap

angular