Angular Material Table单数据项时自动勾选行的实现问询

核心思路 #

监听Observable数据源的变化，根据返回数据的长度自动控制SelectionModel的选中状态：当数据仅1条时选中该行，多条时清空选中。

方法一：TypeScript 中处理（推荐） #

这种方式更符合Angular的数据流管理，避免模板中重复订阅Observable。

1. 修正SelectionModel泛型
   你的数据源是FakeObject[]，所以SelectionModel的泛型应该对应FakeObject，而非Columns：

selection = new SelectionModel<FakeObject>(false, []);

2. 订阅数据源并处理选中逻辑
   在组件的ngOnInit中通过tap操作符监听数据变化，自动更新选中状态：

import { tap, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

// 用于组件销毁时取消订阅，避免内存泄漏
private destroy$ = new Subject<void>();

ngOnInit(): void {
  this.dataSource$.pipe(
    tap(data => {
      if (data.length === 1) {
        // 仅一行时选中该行
        this.selection.select(data[0]);
      } else {
        // 多行时清空选中
        this.selection.clear();
      }
    }),
    takeUntil(this.destroy$)
  ).subscribe();
}

ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

3. 模板无需修改
   保持原模板中[checked]="selection.isSelected(row)"即可，选中状态由SelectionModel统一维护。

方法二：模板中直接实现 #

如果希望在HTML中完成逻辑，可以通过async管道将数据缓存到变量，避免重复订阅：

<!-- 先通过async管道获取数据并缓存 -->
<ng-container *ngIf="dataSource$ | async as tableData">
  <table mat-table [dataSource]="tableData">
    <!-- Checkbox Column -->
    <ng-container matColumnDef="select" *ngIf="checkboxRequired">
      <th mat-header-cell *matHeaderCellDef class="mat-mdc-header-row checkbox table-header">
      </th>
      <td mat-cell *matCellDef="let row" class="mat-mdc-row">
        <mat-checkbox (click)="$event.stopPropagation()"
                      (change)="$event ? selection.toggle(row) : null"
                      <!-- 单行时自动选中，多行时依赖SelectionModel状态 -->
                      [checked]="tableData.length === 1 ? row === tableData[0] : selection.isSelected(row)"
                      class="checkbox">
        </mat-checkbox>
      </td>
    </ng-container>

    <!-- 其他列代码保持不变 -->

    <tr mat-header-row *matHeaderRowDef="displayedColumns" class="mat-mdc-row"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="mat-mdc-row" (click)="selection.toggle(row)"></tr>
  </table>
</ng-container>

注意事项 #

• 方法一中的takeUntil必须配合ngOnDestroy使用，确保组件销毁时取消订阅，避免内存泄漏。
• 方法二中通过*ngIf="dataSource$ | async as tableData"缓存Observable结果，避免模板中多次触发订阅请求。

内容的提问来源于stack exchange，提问作者Donald Groezinger