时间戳

首页 > 解决方案 > 防止点击排序进入Angular matTable中的输入

angular - 防止点击排序进入Angular matTable中的输入

问题描述

嘿嘿，

我是 Angular 的新手，我目前面临一个问题。我想使用带有可排序标题的 MatTable。我是这样做的：

    <table mat-table matSort #table id="entries" [dataSource]="dataSource">
       <ng-container matColumnDef="column1">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> 
             Column1
             <input matInput placeholder="Search Column1" #input style="max-width: 125px;">
          </th>
          <td mat-cell *matCellDef="let entry"> {{data.column1}} </td>
       </ng-container>
       <ng-container matColumnDef="column2">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Column2</th>
          <td mat-cell *matCellDef="let entry"> {{data.column2}} </td>
       </ng-container>
    </table>

我的问题是，如果我单击输入开始输入，就会触发排序功能，这有点不好。那么，如果我点击输入，是否有可能防止触发排序？

提前致谢

标签： angularangular-material

解决方案

您需要停止从输入元素传播点击事件，如下所示，

<input matInput placeholder="Search Column1" #input (click)="$event.stopPropagation()" style="max-width: 125px;">

通过这样做，单击事件不会传播到它的父级，即具有排序操作的标题单元格。

推荐阅读