Как получить необработанные данные из наблюдаемого получения из селектора ngrx - PullRequest
Новая
       17

Как получить необработанные данные из наблюдаемого получения из селектора ngrx

0 голосов
/ 03 октября 2019

Я использую в своем проекте потрясающую библиотеку управления магазинами ngrx. Итак, чтобы получить данные в компоненте, я использую @Select () из ngrx / store, и эта функция возвращает наблюдаемый. В настоящее время я испытываю трудности с получением необработанных данных из наблюдаемой

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

@Select(UserState.userList) userList$; 

<thead>
    <tr>
        <td (click)="sortByName()">
            Name
        </td>

        <td>
            Address
        </td>
    </tr>
</thead>

<tbody>
    <tr *ngFor="let user of userList$ | async">
        <td>
            {{user.name}}
        </td>

        <td>
            {{user.address}}
        </td>
    </tr>
</tbody>

Мой вопрос: как мне отсортировать наблюдаемое по имени: 

sortByName(){
  this.userList$ = this.userList$.sort((a,b)=>{

  return 
 }
}

Примечание, что я отправляю действие после отправки формы: 

submit() {
    if (this.searchForm.valid) {
    this.store.dispatch(new GET_USER_LIST());
   }
  }

Я пытался использовать оператор карты, но он не работает для меня.

Пожалуйста, подскажите, как мне этого добиться.

Ответы [ 2 ]

0 голосов
/ 03 октября 2019

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

Есть несколько способов сделать это, один из них может заключаться в создании новой наблюдаемой, производной от userList $, и для поддержания реактивности, вы можете использовать объектСледите за критериями сортировки. 

sortedList$: Observable<User>;
sortBy$: Subject<string> = new Subject<string>();
constructor() { 
  this.sortedList$ = this.userList$.pipe(
    latestFrom(sortBy$), 
    map(([users, sortBy]) => { 
     // here you have access to users and the sortBy string.
     // do your sorting and return the sorted user list. 
    })); 
}

sortByName(): void { this.sortBy$.next('name') }

В своем шаблоне вы можете подписаться на sortedList $ с ​​помощью асинхронного канала.

Еще один способ сделать это, так как вы уже используете NGXS, эточтобы добавить состояние сортировки в ваш магазин и создать селектор, который комбинирует селектор userList и ваш селектор и возвращает отсортированный список.

0 голосов
/ 03 октября 2019

Вы можете использовать оператор map rxjs (не функцию map js!) Вместе с js sort(), например: 

this.users = this.userList$
  .pipe(
     map((users) => users.sort((a,b) => a.name.toLowerCase() > b.name.toLowerCase() ? -1 : 1))
  );
...