Как добавить иконку в mat-sort-header в mat-таблице - PullRequest
0 голосов
/ 15 января 2019

Я использую mat-table , и мне нужно добавить пользовательский значок в заголовок mat-sort, но теперь, если я нажму на значок, таблица будет отсортирована, а я не хочу это поведение, это код:

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

это заголовок сортировки:

enter image description here

Если я поставлю иконку снаружи, она не появится.

p.s. Я не могу использовать event.stopPropagation ()

1 Ответ

0 голосов
/ 15 января 2019

этот код решит мою проблему:

<!-- 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...