Question

我有与此类似的材料表：

<md-table [dataSource]="dataSource">
    <ng-container mdColumnDef="a">
      <md-header-cell *mdHeaderCellDef> a </md-header-cell>
      <md-cell *mdCellDef="let element"><a routerLink="{{element.number}}"> {{element.a}} </a></md-cell>
    </ng-container>

    <ng-container mdColumnDef="b">
      <md-header-cell *mdHeaderCellDef> b </md-header-cell>
      <md-cell *mdCellDef="let element"> {{element.b}} </md-cell>
    </ng-container>

    <md-header-row *mdHeaderRowDef="['a', 'b']"></md-header-row>
    <md-row *mdRowDef="let row; columns: ['a', 'b']" (click)="selectRow(row)"></md-row>
  </md-table>

在某些情况下，例如当element.b单元格具有某些值时，我想禁用单击事件。我正在使用最新版本的角钢和材料...

这有可能吗？

Answer 1

是的，可以使用角度变化检测。

请参考：A Comprehensive Guide to Angular onPush Change Detection Strategy

要禁用可点击单元格，您可以执行以下操作：

   <md-row *mdRowDef="let row; columns: ['a', 'b']" [disabled]='logic == true' (click)="selectRow(row)"></md-row>

希望您觉得这有用。

Answer 2

如果您需要在 mat 表格行 (td) 中插入 matMenu 或 matSelect - 如果您设置了整行点击，则打开并调用整行点击，需要通过控制点击

*.html

<button
  [matMenuTriggerFor]="actionOptionsMenu"
  mat-icon-button
  (click)="handleActionsClick(actionOptionsMenu, $event)"
>
  <mat-icon>more_vert</mat-icon>
</button>

<mat-menu
  #actionOptionsMenu="matMenu"
 ...

和 *.ts foo

handleActionsClick(mySelect, event) {
  event.stopPropagation();
  event.preventDefault();
  mySelect.open();
}

Answer 3

您可以执行以下操作来实现这一目标。

@HostListener('click', ['$event'])
  onClick(event) {
    if (event.target.innerHTML === " 9.0122 ") {
      event.stopPropagation(); //swallow event and prevent it from bubbling up
    } else {
      console.log('@HostListener: ', event.target.innerHTML)
    }

Stackblitz点击事件中的通知会记录在控制台中除Weight列之外的所有其他内容上，其值为9.0122

Stackblitz

https://stackblitz.com/edit/angular-mgnzv4?embed=1&file=app/table-basic-example.ts

禁用角形材料行上的单击事件以获取特定值

3 个答案: