Angular-如何根據特定列對表數據進行排序

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對數據進行排序。

或者至少您可以使用它們在第一個示例中提供的用於排序的邏輯。