Сортировка данных с помощью заголовка сортировки матов в угловой таблице матов 7 - PullRequest
Новая
       62

Сортировка данных с помощью заголовка сортировки матов в угловой таблице матов 7

0 голосов
/ 16 мая 2019

Я новичок в Angular и хочу отсортировать данные в столбце "Active".Я сортирую все столбцы с помощью mat-sort-header (например, столбец электронной почты), и он работает нормально, за исключением столбца isActive, где я показываю значок mat.Я хочу отсортировать этот столбец по значению element.isActive, чтобы столбец сортировался по активным / неактивным значкам.Я не уверен, как указать сортировку в этом столбце.Это мой коврик: я работаю с угловым и материальным дизайном. 

<div fxLayout="column" style="margin-top:-2.6vh;">
  <table fxFlex mat-table [dataSource]="users" matSort multiTemplateDataRows class="mat-elevation-z8">

    <!-- Checkbox Column -->
    <ng-container matColumnDef="select">
      //relevant code
    </ng-container>

    <!-- Position Column -->
    <ng-container matColumnDef="firstName">
      //relevant code
    </ng-container>

    <!-- lastName Column -->
    <ng-container matColumnDef="lastName">
      //relevant code
    </ng-container>

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

<!-- isActive Column -->
    <ng-container matColumnDef="active">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Active </th>
      <td mat-cell *matCellDef="let element" style=" text-transform:capitalize">

        <mat-icon *ngIf="element.isActive; else elseBlock" color="primary">fiber_manual_record</mat-icon>
        <ng-template #elseBlock><mat-icon color="warm">fiber_manual_record</mat-icon></ng-template>
      </td>
    </ng-container>

    <!-- Actions Column -->
    <ng-container matColumnDef="actionsColumn">
      //relevant code
    </ng-container>


    <!-- Expanded Content -->
    <ng-container matColumnDef="expandedDetail">
      //relevant code
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

    <tr mat-row *matRowDef="let element; columns: displayedColumns;"
        class="example-element-row"
        [class.example-expanded-row]="expandedElement === element"
        (click)="expandedElement = expandedElement === element ? null : element"></tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

  </table>
  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

Сторона TS: 

    import { MatSort, MatTableDataSource } from '@angular/material';
    @Component({
      selector: 'users-list',
      animations: [
        trigger('detailExpand', [
          state('collapsed', style({ height: '0px', minHeight: '0', display: 'none' })),
          state('expanded', style({ height: '*' })),
          transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
        ]),
      ],

    })
    export class UsersListComponent implements OnInit, OnDestroy {
      @ViewChild(MatSort) sort: MatSort;
      @ViewChild(MatPaginator) paginator: MatPaginator;

      users: MatTableDataSource<PimUser>;
      selection = new SelectionModel<PimUser>(true, []);
      displayedColumns = ['select', 'firstName', 'lastName', 'email', 'active', 'actionsColumn'];
      isExpansionDetailRow = (i: number, row: Object) => row.hasOwnProperty('detailRow');
      expandedElement: any;
    }
ngOnInit() {
   this.users.sort = this.sort; 
}

Вот так выглядит мой стол: enter image description here

Есть идеи, как мне это сделать?Спасибо.

1 Ответ

0 голосов
/ 16 мая 2019

Вам необходимо присвоить this.sort свойству sort MatTableDataSource, поэтому в ngOnInit() добавьте строку ниже

sort property :

Экземпляр директивы MatSort, используемый таблицей для управления ее сортировкой. Изменения сортировки, отправленные MatSort, приведут к обновлению отображаемых данных таблицы. 

ngOnInit() {
   ........
   ........
   this.data.sort = this.sort;  // assign this.sort to the property of DataSource
}

WORKING_DEMO

...