使用按钮角度材料表过滤每列答案

【问题标题】：Filtering per column with button angular material table使用按钮角度材料表过滤每列
【发布时间】：2019-10-15 04:24:09
【问题描述】：

我想在列标题上有一个过滤器按钮，我可以通过单击复选框来过滤结果，以及多列过滤。

这是我试过的，按钮加载菜单，但是点击的时候也开始排序，定位不对：

<table mat-table [dataSource]="source" matSort (contextmenu)="onContextMenu($event)"
 matRipple [matRippleRadius]="'15'"
 [matRippleColor]="'#03a9f4'">

        <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name <button mat-button matSuffix mat-icon-button aria-label="Clear" [matMenuTriggerFor]="menu">
        <mat-icon>filter_list</mat-icon>
      </button>
      <mat-menu #menu>
          <ng-template matMenuContent>
            <div *ngFor="let item of items">
                <mat-checkbox class="mat-menu-item">{{item.name}}</mat-checkbox>  
            </div>
          </ng-template>
        </mat-menu>
    </th>
    <td mat-cell *matCellDef="let row"> {{row.name}} </td>
  </ng-container>

  <!-- Email Column -->
  <ng-container matColumnDef="emailAddress">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Email Address </th>
    <td mat-cell *matCellDef="let row"> {{row.emailAddress}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: columns;"></tr>
</table>

<mat-paginator [length]="source.length" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>

这是我想要的一个例子：

【问题讨论】：

你看过了吗：ag-grid.com/angular-getting-started/…
我看了看，但我正在使用一个材质角表，这似乎是完全不同的东西。
距离更近了，但仍有问题
停止传播注释是第一步，之后就是在你的函数中做一些事情以使小排序模式弹出并按预期对表格进行排序。您可以将相关过滤器的 viewchild 传递到 mat-dialog 中，并根据它定位
参考代码： const rect = this.triggerElementRef.nativeElement.getBoundingClientRect(); matDialogConfig.position = {左：${rect.left > 300 ? rect.left - 200: 100}px，上：${rect.bottom + 50}px}； this.dialogRef.updatePosition(matDialogConfig.position);

标签： javascript angular typescript angular-material

【解决方案1】：

您是否尝试向过滤器按钮添加点击事件以防止排序？

(click)="foo($event)"

foo($event: Event) {
    $event.stopPropagation();
}

【讨论】：