Question

我将 Angular 与材料一起使用，具体来说，我正在使用 mat-table 构建表格。我的表格很简单，有两列 - 一个名称列和一个“选择”列（复选框）。

这是我的表格组件代码：

    <mat-table #table [dataSource]="dataSource" matSort matSortActive="name">
  
      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
      </ng-container>
  
      <ng-container matColumnDef="select">
        <mat-header-cell *matHeaderCellDef> Select </mat-header-cell>
        <mat-cell *matCellDef="let element"> 
        
          <mat-checkbox #checkBox [value]="element.position"(change)="getCheckbox(checkBox)"></mat-checkbox>
        
        </mat-cell>
      </ng-container>
  
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row (click)="setCheckedState()" *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

然后我使用以下代码收集已检查项目的列表：

  @ViewChildren ('checkBox') checkBox: QueryList<any> | undefined;

  checked: any = [];

  getCheckbox(checkbox: any){
    this.checked = []; // resetting each Time new event is fire.
    // filtering only checked vlaue and assign to checked variable.
    const checked = this.checkBox?.filter(checkbox => checkbox.checked);

    // then, we make object array of checked, and value by checked variable  
    checked?.forEach(data => {
      this.checked.push ({ 
        'checked' : data.checked,
        'value':  data.value
      });
    });
  }

获取此处找到的已检查项目列表的 Stackbliz 示例：https://stackblitz.com/edit/angular-efyvdr?file=src%2Fapp%2Fapp.component.html

在 mat-table 上，我希望能够点击该行以设置该行复选框的选中状态。

我尝试设置单击行（确实触发），但似乎无法捕捉到该行的复选框。如何根据 mat-row click 设置选中状态（true/false）？

提前感谢您的指点！

Answer 1

最简单的方法是创建一个类来保存复选框的名称和状态，类似于：

export class ItemStatus {
  name: string;
  checked: boolean;
  id: number;

  constructor(id, name) {
    this.id = id;
    this.name = name;
    this.checked = false;
  }
}

然后，您更改为使用 [(ngModel)] 而不是 [value]，如下所示：<mat-checkbox [(ngModel)]="element.checked">

最后，将 get checked 函数更改为基于已检查状态进行过滤，如下所示：

getCheckedItems() {
   this.checked = this.items.filter(i => i.checked == true);
}

总而言之，这是一个stackblitz： https://stackblitz.com/edit/angular-gg394h?file=src%2Fapp%2Fapp.component.html

如何以编程方式设置 mat-table 中 mat-checkbox 的检查状态？

1 个答案: