Question

我有一张有3列的桌子。但是我想按字母顺序按第一列（ Domain ）对表数据进行排序。我的表格html是：

<mat-table #table [dataSource]="tableData">
    <ng-container cdkColumnDef="domain">
      <mat-header-cell *cdkHeaderCellDef fxFlex="50%">Domain</mat-header-cell>
      <mat-cell *cdkCellDef="let config" fxFlex="50%">{{config.domain}}</mat-cell>
    </ng-container>

    <ng-container cdkColumnDef="disable">
      <mat-header-cell *cdkHeaderCellDef fxFlex="30%">Disabled</mat-header-cell>
      <mat-cell *cdkCellDef="let config" fxFlex="30%">{{config.disabled}}</mat-cell>
    </ng-container>

    <ng-container cdkColumnDef="button">
      <mat-header-cell *cdkHeaderCellDef fxFlex="15%"></mat-header-cell>
      <mat-cell *cdkCellDef="let config" fxFlex="15%">
        <mat-icon (click)="deleteDomain(config)" style="cursor: pointer">delete_forever</mat-icon>
      </mat-cell>
    </ng-container>

    <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *cdkRowDef="let config; columns: displayedColumns;"></mat-row>
  </mat-table>

此表的.ts文件由以下代码组成：

private _domainData = new BehaviorSubject<Domain[]>([]);

  @Input()
  set domainData(value: Domain[]) {
    this._domainData.next(value);
  }
  displayedColumns = ['domain', 'disable', 'button'];
  tableData: Domain[];

有可能实现这一目标吗？

Answer 1

在特定列上单击时，可以通过TypeScript的sort方法实现此目的。我认为您不需要在后端编写此逻辑。

如果只想显示根据您的“域”列排序的数据。然后，请进行熏黑处理会更好。

希望这会有所帮助。

Answer 2

如果您使用的是Angular Material，则可以使用Sort Header对数据进行排序。

或者至少您可以使用它们在第一个示例中提供的用于排序的逻辑。

Angular-如何根据特定列对表格数据进行排序

2 个答案: