Ngx-datatable неправильно в (компоненте) HTML. Как отсортировать таблицу по имени столбца с помощью выпадающего списка (Angular 7)

Question

Мне нужно, чтобы раскрывающийся список располагался над таблицей данных Ngx, и в этом раскрывающемся списке необходимо отсортировать данные Ngx по значениям в раскрывающемся списке. Я все еще новичок в Angular, так как я обнаружил, что неправильно указывать ngx-datatable в component.html. Как я могу бутлегировать данные, чтобы сортировать строки по значениям в выпадающем списке?

Думая, что метод в 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.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];
  }

Я создал рабочую демонстрацию на здесь .Надеюсь, это поможет в моем объяснении!