angular - 如何将图标添加到 mat-table 中的 mat-sort-header

Question

我正在使用mat-table，我需要在 mat-sort-header 中添加一个自定义图标，但是现在如果我单击图标，表格将被排序，我不想要这种行为，这是代码：

<!-- line Column -->
      <ng-container matColumnDef="line">
        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>
          line
          <span *ngIf="lineFiltered == false; else noFilteredline" (click)="filterLine.toggle($event)" class="filter">
           <i class="fa fa-filter" aria-hidden="true"></i></span>
            <ng-template #noFilteredline>
            <span (click)="filterLine.toggle($event)" class="filter success"
              ><i class="fa fa-filter" aria-hidden="true"></i
            ></span>
          </ng-template>
        </th>
        <td mat-cell *matCellDef="let row">{{ row.line }}</td>
      </ng-container>

这是排序标题：

如果我把图标放在外面，它就不会出现。

ps 我不能使用 event.stopPropagation()

标签： angularangular-material

Answer 1

这段代码解决了我的问题：

<!-- line Column -->
    <ng-container matColumnDef="line">
      <th mat-header-cell *matHeaderCellDef>
          <div class="d-flex">
        <span *ngIf="lineFiltered == false" (click)="filterLine.toggle($event)" class="filter"
          ><i class="fa fa-filter" aria-hidden="true"></i
        ></span>
        <span mat-sort-header disableClear> {{ "contactlens.table.headers.line" | translate }}</span>
        </div>
      </th>
      <td mat-cell *matCellDef="let row">
        {{ row.line }}

      </td>
    </ng-container>