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

Question

>我正在使用角度材料选择表，问题是当我单击行上的任意位置时，复选框被选中或取消选中。我想禁用它，以便仅在单击复选框时选中或取消选中该复选框。

网页代码

<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>

我正在使用角度材料选择表，问题是当我单击行上的任意位置时，复选框被选中或取消选中。我想禁用它，以便仅在单击复选框时选中或取消选中该复选框。

目录代码

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

您可以覆盖默认的单击操作并在那里应用您的逻辑。 这类似于如何在角度材料表中的垫行上添加单击事件中已经回答的问题

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

我想你的意思是在这一行中使用rowClicked((：

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