Отключение события щелчка в строке углового материала для определенных значений

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>

Я бы хотел отключить событие click в некоторых случаях, например, когда ячейка element.b имеет какое-то значение.Я использую последние версии угловых и материалов ...

Возможно ли это и как?

Answer 1

Для этого вы можете сделать следующее:

@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

Answer 2

Да, это возможно при использовании углового обнаружения изменений.

См. Комплексное руководство по угловой стратегии обнаружения изменений onPush

Чтобы отключить интерактивную ячейку, вы можете сделать следующее:

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

Надеюсь, вы найдете это полезным.