Блог

Я пытаюсь создать сортировку базовой таблицы с помощью Angular.

Для настройки таблицы я использую:

 <table id="tableSortExample" mdbTable class="z-depth-1">
  <thead>
  <tr>
    <th (click)="sort('One')">One</th>
    <th (click)="sort('Two')">Two</th>
    <th (click)="sort('Three')">Three</th>
    <th (click)="sort('Four')">Four</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let el of elements; let i = index">
    <th scope="row">{{el.id}}</th>
    <td>{{el.first}}</td>
    <td>{{el.last}}</td>
    <td>{{el.handle}}</td>
  </tr>
  </tbody>
</table>
 

а затем определить в компоненте:

   sort(colName) {
    console.log('sort clicked : '   colName);
    this.elements.sort((a, b) => a[colName] > b[colName] ? 1 : a[colName] < b[colName] ? -1 : 0)
  }
  // tslint:disable-next-line:typedef
  ngOnInit() {
    for (let i = 1; i <= 11; i  ) {
      this.elements.push({
        id: i,
        first: 'test',
        last: 'Name '   i,
        handle: 'Handle '   i
      });
    }
  }
 

При открытии страницы, содержащей HTML-код, отображается таблица :

Но щелчок по заголовкам столбцов не применяет сортировку.

Функция сортировки запускается по щелчку, так как можно увидеть сообщения, напечатанные в журнале:

 console.log('sort clicked : '   colName);
 

Я пытаюсь работать с ранее заданным вопросом, но, похоже, я пропустил шаг или что-то не понял.

Как включить сортировку столбцов?

Ключами в elements массиве являются: id , first , last , и handle

Замените аргументы в sort вызываемых функциях.

 <th (click)="sort('id')">One</th>
<th (click)="sort('first')">Two</th>
<th (click)="sort('last')">Three</th>
<th (click)="sort('handle')">Four</th>