Таблица сортировки по наблюдаемым в Angular 6

Question

Я делаю приложение в Angular 6, где я получаю данные из JSON API в таблицу. Я должен отсортировать эти данные после нажатия на заголовок. Я не знаю, как мне это сделать. Я новичок в Angular, я прошу вашего понимания

Мой .ts код

    export class AppComponent implements OnInit {

  readonly ROOT_URL = '...';
  datas: Observable<Data[]>;

  constructor(private http: HttpClient) {
  }

  sortTable(parm) {
    this.datas.subscribe(item => item.sort((a: any, b: any) => {
      return a[parm] - b[parm];
    }));
  }

  getDatas() {
    this.datas = this.http.get<Data[]>(this.ROOT_URL);
  }


  ngOnInit() {
    this.getDatas();


  }

}

Интерфейс

export interface Data {
  long: string;
  perc: number;
  price: number;
}

И HTML-код

<div class="col-md-6">
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col" (click)="sortTable(long)">Nazwa</th>
        <th scope="col">Cena</th>
        <th scope="col">Zmiana(24h)</th>
      </tr>
    </thead>
    <tbody *ngFor="let data of datas | async" style="font-size: 12px;">
      <tr>
        <td>{{ data.long }}</td>
        <td>{{ data.price }} $</td>
        <td>{{ data.perc }} %</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

Сортировку по возрастанию и убыванию можно выполнить, как показано ниже

sortTable(param){
 this.filteredData.sort((a, b)=> {
   return -1; 
 });
}

Answer 2

Вы можете удалить асинхронный канал и подписаться на данные с помощью функции подписки.Так что используйте функцию сортировки массива.

...
datas: Array<Data>;
...
sortTable(parm) {
    // you can use one of this solutions, but I recomend localeCompare
    // this.datas.sort((a, b)=>a[parm] > b[parm]);
    this.datas.sort((a, b)=> a[parm].localeCompare(b[parm]) );
}

getDatas() {
   this.http.get<Data[]>(this.ROOT_URL).subscribe(it =>this.datas = it)
}


<tbody *ngFor="let data of datas" style="font-size: 12px;">