Angular expand/collapsible table 行 - 使用 ng-bootstrap

Question

我正在创建一个应用程序，当我点击 table 的 TR 时，我需要展开该行以显示详细信息。但是，执行此操作时，所有行都会展开，显示被单击行的数据，如下图所示。你能帮帮我吗？

我的代码：

<tbody>
        <ng-container *ngFor="let machine of machines">
          <tr (click)="selectedMachine = machine">
            <td>
              <div class="user-info">
                <div class="user-info__img">
                  <img src="./assets/img/cloud2.svg" alt="Usuário Img">
                </div>
                <div class="user-info__basic">
                  <h5 class="mb-0">{{machine.name}}</h5>
                </div>
              </div>
            </td>
            <td (click)="selectedMachine = machine">
              <span class="active-circle bg-success"></span> Status
            </td>
            <td (click)="selectedMachine = machine">{{machine?.flavor?.disk}} GB</td>
            <td (click)="selectedMachine = machine">{{machine?.flavor?.ram}} GB</td>
            <td (click)="selectedMachine = machine">{{machine?.flavor?.vcpus}}x 2.8Mbps</td>
            <td>
                <button type="button" class="btn btn-primary mr-2" ngbTooltip="Open" (click)="openMachine(machine.id)"><i class="fas fa-external-link-alt"></i></button>
                <button type="button" class="btn btn-primary mr-2" ngbTooltip="Detail"><i class="fas fa-edit"></i></button>
                <button type="button" class="btn btn-danger" ngbTooltip="Delete"><i class="far fa-trash-alt"></i></button>
            </td>
          </tr>
          <ng-container *ngIf="selectedMachine">
            <tr [ngbCollapse]="!selectedMachine">
              <td (click)="selectedMachine = null" class="text-center"><i class="fa fa-angle-up"></i></td>
              <td>hello</td>
              <td>{{selectedMachine?.flavor?.swap}}</td>
              <td>{{selectedMachine?.flavor?.id}}</td>
              <td>2</td>
              <td>2</td>
            </tr>
          </ng-container>
        </ng-container>
       
      </tbody>

我的组件：

export class MachinesComponent implements OnInit, OnDestroy {

  constructor(private machine: MachineService) { }

  public selectedMachine: any;
  public machines: any[] = [];
}

Answer 1

<ng-container *ngIf="selectedMachine"> 放在里面的意思是 <ng-container *ngFor="let machine of machines">。您可以将其读作 for every machine show the selectedMachine container whenever item is selected。我感觉你想要的是：

<tbody>
        <ng-container *ngFor="let machine of machines">
...
          <ng-container *ngIf="selectedMachine === machine">
            <tr [ngbCollapse]="!selectedMachine">
              <td (click)="selectedMachine = null" class="text-center"><i class="fa fa-angle-up"></i></td>
              <td>hello</td>
              <td>{{selectedMachine?.flavor?.swap}}</td>
              <td>{{selectedMachine?.flavor?.id}}</td>
              <td>2</td>
              <td>2</td>
            </tr>
          </ng-container>
        </ng-container>
       
      </tbody>

它只会在这台机器旁边显示所选机器的详细信息。

Angular expand/collapsible table 行 - 使用 ng-bootstrap

Angular expand/collapsible table Row - using ng-bootstrap

javascript

ng-bootstrap

angular