У меня есть таблица матов с использованием приведенного ниже кода с сортируемыми заголовками. Однако я также хочу разместить в заголовке меню для настраиваемой фильтрации. Проблема в том, что поскольку весь заголовок доступен для кликов и меняет «сортировку» столбца, когда я нажимаю на меню, оно также сортируется, потому что кнопка меню находится внутри заголовка.
<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 [JS]](https://i.imgur.com/WsjO6zJb.png)


Попробуйте взять в заголовке все, что вы не хотите запускать сортировку, оберните его в div и поместите в него обработчик кликов, который вызывает $ event.stopPropagation ().
Просто удалите директиву mat-sort-header из заголовка, который не должен быть кликабельным (SORTABLE):
<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>
Поместите свое меню в div и добавьте (click) = "$ event.stopPropagation ()" в свой div, например
<div (click) = "$event.stopPropagation()">
your menu....
</div>
Надеюсь, это решит вашу проблему.
не работает ... У меня такая же проблема с mat-sort-header. Я хочу отображать MatMenu, когда щелкаю столбец заголовка, чтобы выбрать какое-либо условие после сортировки, но я не могу -> mat-sort-header начинает сортировку, когда я нажимаю ...