Angular MatTable：点击表头输入框时阻止排序触发

嗨，这个问题我之前在项目里也碰到过！核心原因是mat-sort-header指令会给所在的<th>元素绑定点击事件来触发排序逻辑，而你的搜索输入框嵌套在这个<th>里面，点击输入框时，事件会向上冒泡到<th>，从而意外触发了排序。

这里有两种简单有效的解决方法：

方法一：直接阻止输入框的事件冒泡 #

最直接的方式就是在输入框上添加(click)="$event.stopPropagation()"，让点击输入框的事件不会向上传递到<th>，这样就不会触发排序了。修改后的代码如下：

<ng-container matColumnDef="column1">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> 
    Column1 
    <input 
      matInput 
      placeholder="Search Column1" 
      #input 
      style="max-width: 125px;"
      (click)="$event.stopPropagation()"
    >
  </th>
  <td mat-cell *matCellDef="let entry">{{entry.column1}}</td>
</ng-container>

顺便提个小细节：你原来的代码里*matCellDef="let entry"后面用了{{data.column1}}，这里应该改成{{entry.column1}}才对，不然所有行都会显示同一个data对象的column1值，这大概率是个笔误~

方法二：通过表头点击事件统一处理 #

如果你有多个带输入框的表头，或者想要更灵活的控制，可以在<th>上绑定点击事件，然后在组件逻辑里判断点击目标是否是输入框，再决定是否阻止冒泡：

首先在组件的.ts文件里添加处理函数：

onHeaderClick(event: MouseEvent) {
  const targetElement = event.target as HTMLElement;
  // 判断点击的元素是否是输入框，或者输入框的子元素
  if (targetElement.tagName === 'INPUT' || targetElement.closest('input')) {
    event.stopPropagation();
  }
}

然后修改模板里的表头元素：

<ng-container matColumnDef="column1">
  <th 
    mat-header-cell 
    *matHeaderCellDef 
    mat-sort-header
    (click)="onHeaderClick($event)"
  > 
    Column1 
    <input matInput placeholder="Search Column1" #input style="max-width: 125px;">
  </th>
  <td mat-cell *matCellDef="let entry">{{entry.column1}}</td>
</ng-container>

这两种方法都能完美解决你的问题，推荐第一种，更简洁直接~

内容的提问来源于stack exchange，提问作者backfisch_2_go