从Angular 6中的观察值对表进行排序

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';

@Component({
  selector: 'app-table',
  template: `
    <table>
      <thead>
        <tr>
          <th (click)="sort('name')">Name</th>
          <th (click)="sort('age')">Age</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of sortedData$ | async">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  `,
})
export class TableComponent implements OnInit {
  data = [
    { name: 'John', age: 25 },
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 20 },
  ];

  sortedData$: Observable<any[]>;

  ngOnInit() {
    this.sortedData$ = this.observeData().pipe(
      map((data) => this.sortData(data))
    );
  }

  observeData(): Observable<any[]> {
    return new Observable((observer) => {
      observer.next(this.data);
      observer.complete();
    });
  }

  sortData(data: any[]): any[] {
    return data.sort((a, b) => a.name.localeCompare(b.name));
  }

  sort(key: string) {
    this.sortedData$ = this.sortedData$.pipe(
      tap((data) => {
        data.sort((a, b) => a[key] - b[key]);
      })
    );
  }
}