Как я могу изменить данные, возвращаемые из наблюдаемого, когда подписка активна? - PullRequest
Новая
       24

Как я могу изменить данные, возвращаемые из наблюдаемого, когда подписка активна?

0 голосов
/ 17 февраля 2020

Я использую Angular Таблицу материалов для отображения списка сотрудников, приходящих из наблюдаемого потока. 

<table mat-table [dataSource]="employees$ | async" matSort class="mat-elevation-z8"
(matSortChange)="onMatSortChange($event)" matSortDisableClear>
...
</table>

Как вы можете видеть, я реализую собственную функцию сортировки, которая срабатывает, когда пользователь нажимает на один из заголовков столбцов. Исходя из этого события, мне нужно отсортировать элементы в таблице. Прямо сейчас у меня есть это: 

onMatSortChange(sort: Sort): void {
    const { active, direction } = sort;
    const compareFn = (a: Employee, b: Employee) => {
      console.log(direction);
      if (direction === 'asc') {
        if (a[active] > b[active]) { return 1; }
        if (a[active] < b[active]) { return -1; }
        return 0;
      } else if (direction === 'desc') {
        if (a[active] < b[active]) { return 1; }
        if (a[active] > b[active]) { return -1; }
        return 0;
      }
    };
    this.employees$ = this.employees$.pipe(map(results => results.sort(compareFn)));
  }

Теперь это, кажется, работает правильно, но я не верю, что я должен переназначить наблюдаемое, как это. У меня есть журнал консоли в моем CompareFn, который печатает еще один раз каждый раз, когда я щелкаю заголовок столбца (каждый раз, когда я щелкаю по нему, я вижу вывод для всех щелчков).

Есть ли rx js оператор, который я должен использовать вместо этого, чтобы получить желаемый результат?

1 Ответ

1 голос
/ 17 февраля 2020

Вы правы, что вам не следует переназначать наблюдаемую ссылку. Для этого я бы express определил ваш вид наблюдаемого субъекта, который выдает новый объект сортировки при каждом нажатии кнопки. Вы можете объединить этот поток сортировки в ваш основной сотрудник. Как то так ... 

sorts$ = new Subject<Sort>();
employees$ = this.employeeService.get().pipe(
  withLatestFrom(this.sorts$), // or mergeMap() depending on desired behavior
  map(([employees, sort]) => {
    // your sort logic here
    return sortedEmployees;
  })
);

onMatSortChange(sort: Sort): void {
    this.sorts$.next(sort);
}
...