角度材料选择表，如何在单击行时禁用行选择？

Question

我正在使用 Angular 材料选择表，问题是当我单击行上的任何位置时复选框被选中或取消选中。我想禁用它，所以只有当我点击它时才会选中或取消选中复选框。

HTML 代码

   <div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
      <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()" color="primary">
          </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)" color="primary">
          </mat-checkbox>
        </td>
      </ng-container>
      <!-- Position Column -->
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> ID</th>
        <td mat-cell *matCellDef="let element"> {{element.id}} </td>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="candidates">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Candidates</th>
        <td mat-cell *matCellDef="let element" (click)="rowClicked()" class="candidateName"> {{element.candidates}} </td>
      </ng-container>

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

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

      <ng-container matColumnDef="owner">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Owner</th>
        <td mat-cell *matCellDef="let element"> {{element.owner}} </td>
      </ng-container>

      <ng-container matColumnDef="appliedDate">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Applied Date</th>
        <td mat-cell *matCellDef="let element"> {{element.appliedDate}} </td>
      </ng-container>

      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status</th>
        <td mat-cell *matCellDef="let element"> {{element.status}} </td>
      </ng-container>


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

    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
  </div>

我正在使用 Angular 材料选择表，问题是当我单击行上的任何位置时复选框被选中或取消选中。我想禁用它，所以只有当我点击它时才会选中或取消选中复选框。

ts 代码

import {ChangeDetectionStrategy, Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';
import {MatSort} from '@angular/material';
import {SelectionModel} from '@angular/cdk/collections';
export interface PeriodicElement {
  id: number;
  candidates: string;
  appliedFor: string;
  stages: number;
  owner: string;
  appliedDate: string;
  status: string;
}
export interface Options {
  id: number;
  name: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {id: 1, candidates: 'Max', appliedFor: 'Frontend Developer',
    stages: 3, owner: 'John', appliedDate: 'Jan, 24 2019', status: 'Hired'}
];

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-candidates',
  templateUrl: './candidates.component.html',
  styleUrls: ['./candidates.component.css']
})

export class CandidatesComponent implements OnInit {

  displayedColumns: string[] = ['select', 'id', 'candidates', 'appliedFor', 'stages', 'owner', 'appliedDate', 'status'];
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
  numSelected = 0;
  options: Options[];
  selectedOption: any;

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;
  selection = new SelectionModel<PeriodicElement>(true, []);

  constructor() {}

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.options = [
      {id: 1, name: 'All Candidates'},
      {id: 1, name: 'Active'},
      {id: 1, name: 'Rejected'},
      {id: 1, name: 'Snoozed'}
    ];
    this.selectedOption = this.options[0];
  }
  isAllSelected() {
    this.numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return this.numSelected === numRows;
  }
  masterToggle() {
    this.isAllSelected() ?
      this.selection.clear() :
      this.dataSource.data.forEach(row => this.selection.select(row));
  }
  checkboxLabel(row?: PeriodicElement): string {
    if (!row) {
      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
    }
    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.id + 1}`;
  }
  selectionChanged(option: Options) {
    this.selectedOption = option;
  }
  rowClicked() {
    console.log('candidates');
  }
}

Answer 1

您可以覆盖默认的点击操作并在那里应用您的逻辑。 这类似于How to add click event on mat-row in angular material table中已经回答的问题

在您编辑后添加： 在您的代码中，我看到您在 mat-checkbox 中调用了一次函数 selection.toggle(row) ，然后在行单击时第二次调用（就在您关闭 table 标记之前）。

我认为您的意思是在这一行中使用 rowClicked()：

<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"></tr>