（組件）HTML中的Ngx-datatable錯誤如何使用下拉框按列名稱對表進行排序（Angular 7）

Question

我需要一個位於Ngx數據表上方的下拉框，並且該下拉框需要通過該下拉框中的值對Ngx數據表進行排序。 我還是Angular的新手，所以我發現在component.html中使用ngx-datatable是錯誤的。 我如何盜用數據表，以便可以按下拉框中的值對行進行排序？

考慮到component.ts中的方法已鏈接到數據表，我將在下拉框中調用該方法以對其進行排序。 它是完全分開的！

component.html

<ngx-datatable class="expandable"
                 [rows]="rows"
                 [columns]="columns"
                 [headerHeight]="40"
                 [rowHeight]="'auto'"
                 [columnMode]="'force'" [limit]="20" [footerHeight]="50">
    <ngx-datatable-column name="Header">
      <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
        <span class="custom-cell"><a (click)="method(content, id, false)">{{value}}</a></span>
      </ng-template>
    </ngx-datatable-column>

我的下拉框

<div ngbDropdown class="filter-dropdown-wrapper">
    <button class="btn btn-light filter-button" id="input1" ngbDropdownToggle>Select an option</button>
    <div ngbDropdownMenu aria-labelledby="inputmethod">          
      <!--<select (change)="getColumnNames($event.target.value)">
      <option *ngFor="let element of rows" value="{{element.header}}"></option>
      </select>-->

component.ts

columns = [
{ prop: 'header', name: 'Header' },
{ prop: 'notrelavant', name: 'Not Relevant' }, ];

我需要的是：在下拉框中單擊標題值，然后對數據表進行排序。

Answer 1

我想出了一個適合您的解決方案。 如果我們分解步驟，實際上並不是很困難：

1）在ngbDropdown ，我們用數據表的列填充菜單項。 我們在每個菜單項上附加一個click事件綁定，然后將它們綁定到sort()方法，該方法將column屬性（ column.prop ）作為參數。

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-light filter-button" id="input1" ngbDropdownToggle>Select an option</button>
  <div ngbDropdownMenu aria-labelledby="inputmethod">
    <button ngbDropdownItem *ngFor="let column of columns" (click)="sort(column.prop)">
      {{ column.prop }}
    </button>
  </div>
</div>

2）現在，在我們的component.ts上，我們定義了sort()方法。 rows代表數據表中的數據。 我們使用localeCompare對其進行字母數字排序。 我們創建rows的淺表副本以顯式觸發數據表中的更改檢測以更新數據的順序。

  sort(prop) {
    this.rows.sort((a, b) => a[prop].localeCompare(b[prop], 'en', { numeric: true }));
    this.rows = [...this.rows];
  }

我在這里創建了一個工作演示。 希望對我的解釋有所幫助！