Как сделать mat-sort-header не все кликабельным

У меня есть таблица матов с использованием приведенного ниже кода с сортируемыми заголовками. Однако я также хочу разместить в заголовке меню для настраиваемой фильтрации. Проблема в том, что поскольку весь заголовок доступен для кликов и меняет «сортировку» столбца, когда я нажимаю на меню, оно также сортируется, потому что кнопка меню находится внутри заголовка.

<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>

Есть ли способ обойти это

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
1 599
3

Ответы 3

Попробуйте взять в заголовке все, что вы не хотите запускать сортировку, оберните его в div и поместите в него обработчик кликов, который вызывает $ event.stopPropagation ().

не работает ... У меня такая же проблема с mat-sort-header. Я хочу отображать MatMenu, когда щелкаю столбец заголовка, чтобы выбрать какое-либо условие после сортировки, но я не могу -> mat-sort-header начинает сортировку, когда я нажимаю ...

Bretbas 23.07.2020 19:31

Просто удалите директиву 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>

Надеюсь, это решит вашу проблему.

Другие вопросы по теме