javascript - Angular NgFor 在 TR 中折叠数据

Question

我正在执行 ngfor 以将我的 API 返回到表中，我需要从我的表中隐藏/显示一行详细信息，但该行在我的 ngfor 之外，所以我无法绑定(bind)我的 ngfor 数据。你能帮助我吗？有没有办法做到这一点？我想过使用 ng-container，但我不是很了解。

我的组件:

export class MachinesComponent implements OnInit, OnDestroy {

  constructor(private machine: MachineService) { }

  public isMenuCollapsed = true;
  public machines: any[] = [];
  private alive: boolean = true;

  ngOnInit(): void {
    this.machine.getMachines()
      .takeWhile(() => this.alive)
      .subscribe((machine) => this.machines = machine['servers']);
  }
}

我的 HTML 代码:

<section class="main-content" *ngIf="machines.length >0">
    <table class="table">
      <thead>
        <tr>
          <th>Machine</th>
          <th>Status</th>
          <th>Disk</th>
          <th>RAM</th>
          <th>VCPU</th>
          <th scope="col">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let machine of machines">
          <td (click)="isMenuCollapsed = !isMenuCollapsed">
            <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)="isMenuCollapsed = !isMenuCollapsed">
            <span class="active-circle bg-success"></span> Active
          </td>
          <td (click)="isMenuCollapsed = !isMenuCollapsed">{{machine?.flavor?.disk}} GB</td>
          <td (click)="isMenuCollapsed = !isMenuCollapsed">{{machine?.flavor?.ram}} GB</td>
          <td (click)="isMenuCollapsed = !isMenuCollapsed">{{machine?.flavor?.vcpus}}x 2.8Mbps</td>
          <td >
              <button type="button" class="btn btn-primary mr-2" ngbTooltip="Open"><i class="fas fa-external-link-alt"></i></button>
              <button type="button" class="btn btn-primary mr-2" ngbTooltip="Detail"><i class="far fa-eye"></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>

         <!-- I need the ngfor data inside this TR line collapse -->
        <tr class="collapse cell-1 row-child" [ngbCollapse]="isMenuCollapsed">
          <td (click)="isMenuCollapsed = true" class="text-center"><i class="fa fa-angle-up"></i></td>
          <td>Product&nbsp;</td>
          <td>iTelefone SX with ratina display</td>
          <td>QTY</td>
          <td>2</td>
          <td>2</td>
        </tr>
      </tbody>
    </table>
</section>

Answer 1

如果我没理解错的话，你想在表格的最后一行显示点击的项目。这是解决方案

组件:

export class MachinesComponent implements OnInit, OnDestroy {
  // Convention is to put properties before the constructor
  public machines: any[] = [];
  private alive: boolean = true;
  // This property is added
  public selectedMachine: any;

  constructor(private machine: MachineService) { }

  ngOnInit(): void {
    this.machine.getMachines()
      .takeWhile(() => this.alive)
      .subscribe((machine) => this.machines = machine['servers']);
  }
}

HTML代码:

<section class="main-content" *ngIf="machines.length >0">
    <table class="table">
      <thead>
        <tr>
          <th>Machine</th>
          <th>Status</th>
          <th>Disk</th>
          <th>RAM</th>
          <th>VCPU</th>
          <th scope="col">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let machine of machines">
          <td (click)="selectedMachine = machine">
            <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> Active
          </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"><i class="fas fa-external-link-alt"></i></button>
              <button type="button" class="btn btn-primary mr-2" ngbTooltip="Detail"><i class="far fa-eye"></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>

         <!-- I need the ngfor data inside this TR line collapse -->
        <tr class="collapse cell-1 row-child" [ngbCollapse]="!selectedMachine">
          <td (click)="selectedMachine = null" class="text-center"><i class="fa fa-angle-up"></i></td>
          <td>Product&nbsp;</td>
          <td>iTelefone SX with ratina display</td>
          <td>QTY</td>
          <td>2</td>
          <td>2</td>
        </tr>
      </tbody>
    </table>
</section>