Сложная наблюдаемая сортировка массива

Question

У меня есть наблюдаемый массив, clientService.clients$, который я хотел бы отсортировать, но, кажется, ничего не происходит, когда я пытаюсь его отсортировать:

sortClients(method : string) : void {

  console.log(method)

  this.clientService.clients$.pipe(
    map( clients => {
      console.log(clients);
      sorted = []
      for ( let type of this.appointment_types ) {
        let apps = this.clients[type];
        if (method == 'name') {
          sorted = _.sortBy(apps, (client) => {
            if (client && client.name) {
              return _.last(client.name.split(" "))
            }
          })
        } else {
          sorted = apps.sort((a, b) => {
            return new Date(a['time']).valueOf() - new Date(b['time']).valueOf()
          })
          // console.log(sorted)
        }
      }
    })
  );

И я хотел бы избежать сохранения значения clients в этом компоненте и просто изменить значение clients$, чтобы я мог включить его в свое представление как наблюдаемое.

<ion-list *ngFor="let clientGroup of clientService.clients$ | async | keyvalue; let i = index;" class="awaken-striped">

  <client-index-row
    *ngFor="let client of clientGroup.value"
    [client]="client"
    [type]="type"
    (clientSelected)="itemTapped($event)"
  ></client-index-row>

</ion-list>

Я знаю, что что-то не так, потому что я не могу subscribe с результатом map, но я не уверен, как это исправить. Кроме того, я вижу console.log(method) в своей консоли, но я не вижу console.log(clients)

Answer 1

1. Вы не возвращаете sorted из map, функция map ожидает, что вы вернете (мутировавшие) данные.
2. Результат операторов, вызванных в pipe, также должен быть применен / назначен для чего-либо. В этом случае они игнорируются, если типы совпадают (возвращается с карты), вы можете переназначить обратно на client$ или назначить новое локальное поле.

sortClients(method : string) : void {

  console.log(method)

  this.clients$ = this.clientService.clients$.pipe(
    map( clients => {
      console.log(clients);
      sorted = []
      for ( let type of this.appointment_types ) {
        let apps = this.clients[type];
        if (method == 'name') {
          sorted = _.sortBy(apps, (client) => {
            if (client && client.name) {
              return _.last(client.name.split(" "))
            }
          })
        } else {
          sorted = apps.sort((a, b) => {
            return new Date(a['time']).valueOf() - new Date(b['time']).valueOf()
          })
          // console.log(sorted)
        }
      }
      // added
      return sorted;
    })
  );

Теперь получите доступ к полю из компонента, а не из службы. Это предполагает, что метод sortClients был вызван так, что $clients не является undefined.

<ion-list *ngFor="let clientGroup of clients$ | async | keyvalue; let i = index;" class="awaken-striped">