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的浅表副本以显式触发数据表中的change detection，以更新数据的顺序。

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

我已经在here上创建了一个有效的演示。希望对我的解释有所帮助！

（组件）HTML中的Ngx-datatable错误如何使用下拉框按列名称对表进行排序（Angular 7）

1 个答案: