Angular 10 table with selection - 选中时显示扩展行

Question

我正在使用 angular 10 table 进行选择，但想在选择该行时显示可展开的行。我试过使用可扩展 tables 和选择 table 但它没有用。

我在下面添加了我的 html 代码，但该行在页面上始终可见。我只希望它在选中该行时可见。

<table mat-table [dataSource]="dataSource" multiTemplateDataRows>
  <!-- Checkbox Column -->
  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
      <mat-checkbox
        (change)="$event ? masterToggle() : null"
        [checked]="selection.hasValue() && isAllSelected()"
        [indeterminate]="selection.hasValue() && !isAllSelected()"
        [aria-label]="checkboxLabel()"
      >
      </mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let row">
      <mat-checkbox
        (click)="$event.stopPropagation()"
        (change)="$event ? selection.toggle(row) : null"
        [checked]="selection.isSelected(row)"
        [aria-label]="checkboxLabel(row)"
      >
      </mat-checkbox>
    </td>
  </ng-container>

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef>No.</th>
    <td mat-cell *matCellDef="let element">{{element.position}}</td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let element">{{element.name}}</td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef>Weight</th>
    <td mat-cell *matCellDef="let element">{{element.weight}}</td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef>Symbol</th>
    <td mat-cell *matCellDef="let element">{{element.symbol}}</td>
  </ng-container>

  <ng-container matColumnDef="expandedDetail">
    <td
      mat-cell
      *matCellDef="let element"
      [attr.colspan]="displayedColumns.length"
    >
      Show when checked
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr
    mat-row
    *matRowDef="let row; columns: displayedColumns;"
    (click)="selection.toggle(row)"
  ></tr>

  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']"></tr>
</table>

谢谢

Answer 1

您需要根据您的选择状态show/hide第二个模板行。

回头看看material的例子，你会注意到他们使用CSS将扩展行高度设置为0，然后将扩展行的溢出和显示更改为flex。

这是一个不同但更快速的示例，它将展开的行包装在一个 ng-if 中，它检查您的复选框使用的相同选择机制。我没有运行这个，这是一个例子。您可以将 ng-if 切换为切换显示：none 或可见性，但要了解使用这些方法会影响 table 渲染所需的时间。

<ng-container matColumnDef="expandedDetail">
<td
  mat-cell
  *matCellDef="let row"
  [attr.colspan]="displayedColumns.length"
>
  <ng-container *ngIf="selection.isSelected(row)">
    Show when checked
  </ng-container>
</td>

Angular 10 table with selection - 选中时显示扩展行

Angular10 table with selection - show expanded row when checked

html-table

angular-material

angular-components

angular