Question

我是Angular的新手，我想对“活动”列中的数据进行排序。我正在使用mat-sort-header对所有列进行排序（例如：电子邮件列），并且除了isActive列（我正在显示mat-icon）之外，它都可以正常工作。我想通过element.isActive中的值对该列进行排序，因此该列将按活动/非活动图标进行排序。我不确定如何在此列中指定排序。这是我的垫子桌子：我正在使用Angular和材料设计。

<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; 
}

这是我的桌子的样子：

关于如何实现的任何想法？谢谢。

Answer 1

您需要将this.sort分配给MatTableDataSource的sort属性，因此在ngOnInit()中添加以下行

排序属性：

表用来控制其排序的MatSort指令的实例。 MatSort发出的排序更改将触发对表的呈现数据的更新。

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

WORKING_DEMO

在角度为mat的表格7中使用mat排序标题对数据进行排序

1 个答案: