Eсть таблица, при клике на его header-ы(name, surname, age или gender) нужно отсортировать по нажатым названиям, на пример если нажать по name, surname нужно будет отсортировать по алфавитному порядку, а по age возростанию
filtername(name) {
let frname = this.service.people.map(itm => itm['name'].first)
frname.sort()
}
filtersurname(surname) {}
filterage(age) {
// return age.map(itm=>itm.dob.age).sort((a,b)=>a-b)
}
filtergender(gender) {}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<table class="table table-bordered table-dark">
<tr>
<th (click)="filtername(service.people)">Name</th>
<th (click)="filtersurname(service.people)">Surname</th>
<th (click)="filterage(service.people)">Age</th>
<th (click)="filtergender(service.people)">Gender</th>
<th>Photo</th>
</tr>
<tr *ngFor="let item of service.people | filters:gender">
<td>{{item.name.first}}</td>
<td>{{item.name.last}}</td>
<td>{{item.dob.age}} </td>
<td>{{item.gender}} </td>
<td>
<img src="{{item.picture.large}}" alt="">
</td>
</tr>
</table>
в консоле всё нормально сортируется, но не получается реализовать в таблице
база людей взята из https://randomuser.me/api?results=20
исходники тут https://stackblitz.com/edit/angular-rkpnyt