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>

这是排序标题：

如果我将图标放在外面，则不会出现。

p.s。我不能使用event.stopPropagation（）

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>

Answer 2

我知道我迟到了，但我希望这能挽救某人的一天。我可以通过使用 <mat-icon> 标签来做到这一点。

在user.component.ts文件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { UserRoutingModule } from './user-routing';
import { UserComponent, ConferenceDetailsModal } from './user.component';

import { MatIconModule } from '@angular/material/icon';


@NgModule({
  declarations: [
    UserComponent
  ],
  imports: [
    CommonModule,
    UserRoutingModule,
    MatIconModule
  ]
})
export class UserModule { }

在user.component.html文件中

<table mat-table [dataSource]="dataSource">
    <!-- Title Column -->
    <ng-container matColumnDef="title">
        <th (click)="sortBy('title')" mat-header-cell *matHeaderCellDef mat-sort-header class="Fixed-left">
            <span class="title-text"> Title
                <span *ngIf="propertyName === 'title' && !ascending" class="fa fa-arrow-up">
                    <mat-icon>arrow_upward</mat-icon>
                </span>
                <span *ngIf="propertyName === 'title' && ascending" class="fa fa-arrow-down">
                    <mat-icon>arrow_downward</mat-icon>
                </span>
            </span>
        </th>
        <td mat-cell *matCellDef="let element" [innerHTML]="element.title" class="Fixed-left"> </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row
        *matRowDef="let row; columns: displayedColumns | paginate: {id: 'server', itemsPerPage: perPageItem, currentPage: currentPageNumber, totalItems: total}; let i=index;">
    </tr>
</table>

如何在mat-table的mat-sort-header中添加图标

2 个答案: