如何从ngrx选择器中获取可观察的原始数据答案

【问题标题】：How to get raw data from observable getting from ngrx selector如何从ngrx选择器中获取可观察的原始数据
【发布时间】：2019-10-03 15:22:55
【问题描述】：

我在我的项目中使用了很棒的 ngrx 商店管理库。因此，要在组件中获取数据，我正在使用来自ngrx/store 的@Select() 并且此函数返回可观察的。目前，我很难从 observable 中获取原始数据

在我的代码中，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>

我的问题是如何根据名称对 observable 进行排序：

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

  return 
 }
}

我在提交表单后调度操作的注意事项：

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

我曾尝试使用地图运算符，但它对我不起作用。

请建议我如何实现这一目标。

【问题讨论】：

标签： angular typescript observable ngrx ngrx-store

【解决方案1】：

您可以将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))
  );

【讨论】：

这将返回一个对象数组，我无法使用异步循环表中的数据，如我的代码所示
那么为什么不删除 async 呢？您已经解析了要处理的数据，没有理由在模板中也这样做。
我知道了。但是我在表单提交后设置了 dispatch() 函数并获取了我立即在 html 中显示的 userList$。我有问题。
我已经更新了我的问题。如果我能够在表单提交后设法显示数据，我会很乐意删除异步。在我提交表单@TheUnreal 后，有什么方法可以在不使用异步管道的情况下显示数据

【解决方案2】：

您说您尝试了地图运算符，但您没有展示您的尝试。地图应该非常适合您的用例。

有很多方法可以做到这一点，一种方法是创建一个从 userList$ 派生的新 observable 并保持反应，您可以使用主题来跟踪排序标准。

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 选择器和您的排序选择器结合起来并返回一个排序列表。

【讨论】：