如何使 mat-sort-header 并非全部可点击答案

【问题标题】：How to make mat-sort-header not all clickable如何使 mat-sort-header 并非全部可点击
【发布时间】：2019-04-04 00:31:16
【问题描述】：

我有一个使用以下代码和可排序标题的垫表。但是，我还想在标题中放置一个菜单以进行自定义过滤。问题是因为整个标题可单击并更改列的“排序”，当我单击菜单时它也会排序，因为菜单按钮位于标题内。

<mat-table #table [dataSource]="dataSource" matSort>
                <ng-container matColumnDef="Borrower1">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> 
                    <div class="header">
                      Borrower1
                      <button mat-button [matMenuTriggerFor]="menu" #matMenuTrigger="matMenuTrigger" >
                        <mat-icon>filter_list</mat-icon>
                      </button>
                    </div>
                     <mat-menu #menu="matMenu"   >
                          <div (mouseleave)="matMenuTrigger.closeMenu()">
                            <button mat-menu-item>Item 1</button>
                            <button mat-menu-item>Item 2</button>
                            <button mat-menu-item>Item 3</button>
                            <button mat-menu-item>Item 4</button>
                            <button mat-menu-item>Item 5</button>
                          </div>
                        </mat-menu>     
                  </mat-header-cell>

                  <mat-cell *matCellDef="let element"> {{element.Borrower1}} </mat-cell>

                </ng-container>
                <ng-container matColumnDef="_id">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> 
                    _id
                  </mat-header-cell>
                  <mat-cell *matCellDef="let element"> {{element._id}} </mat-cell>
                </ng-container>
                <ng-container matColumnDef="edit">
                  <mat-header-cell *matHeaderCellDef></mat-header-cell>
                  <mat-cell *matCellDef="let element">
                    <a (click)="editDialog(element._id)" type="button">
                            <mat-icon class="icon">edit</mat-icon>
                    </a>
                  </mat-cell>
                </ng-container>
                <ng-container matColumnDef="delete">
                  <mat-header-cell *matHeaderCellDef></mat-header-cell>
                  <mat-cell *matCellDef="let element">
                    <a (click)="deletePost(element._id)" type="button">
                            <mat-icon class="icon">delete</mat-icon>
                    </a>
                  </mat-cell>
                </ng-container>   
                <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
              </mat-table>

有没有办法解决这个问题

【问题讨论】：

标签： javascript css angular angular-material

【解决方案1】：

尝试获取标题中您不想触发排序的所有内容，将其包装在 div 中，并在其上放置一个调用 $event.stopPropagation() 的点击处理程序。

【讨论】：

不工作...我对 mat-sort-header 有同样的问题。我想在单击标题列以在排序后选择某些条件时显示 MatMenu，但我不能 --> 当我单击时 mat-sort-header 开始排序...

【解决方案2】：

只需从您不想被点击的标题中删除 mat-sort-header 指令（可排序）：

     <mat-table #table [dataSource]="dataSource" matSort>
        <ng-container matColumnDef="_id">
            <mat-header-cell *matHeaderCellDef>
                Id // NOT SORTABLE
            </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.Id}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="edit">
            <mat-header-cell *matHeaderCellDef mat-sort-header>
                Number // SORTABLE
            </mat-header-cell>
            <mat-cell *matCellDef="let row">{{row.Number}}</mat-cell>
        </ng-container>
    </mat-table>

【讨论】：

【解决方案3】：

将您的菜单放在一个 div 中，然后像这样将 (click)="$event.stopPropagation()" 添加到您的 div 中

<div (click)="$event.stopPropagation()">
   your menu....
</div>

希望它能解决你的问题。

【讨论】：