Angular 展开/折叠表格行 - 使用 ng-bootstrap

Question

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

图像行扩展结果： https://imgur.com/a/NmCiV9Q

我的代码：

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

它将仅在此机器旁边显示所选机器的详细信息。