如何直接在ngxs选择器上使用rxjs管道

问题描述

在视图中，似乎无法找到一种直接与选择器中的数据直接交互的优雅方法。类似于按ID或其他动态值排序。

我知道我可以使用动态/惰性选择器，但有时我不想将属性添加到状态中只是为了完成一个简单的UI任务。

例如，如果我想从currentJobsstories $中获取第一个值并将其设置为init上的“活动”故事，我没有简单的方法。

@Select(StoryState.currentJobsstories) currentJobsstories$: Observable<Story[]>;


ngOnInit(): void {
    this.currentJobsstories$.pipe(
      map(story => {
        this.filteredStories = [...story];
        return story;
      }),);
  }

即使我正在html中订阅异步管道，也永远不会执行管道内部的代码。

有没有一种方法可以简单地将选择中的数据插入管道？

解决方法

如果仅出于此组件的目的要转换Selector的结果，则需要定义一个新的Observable以在模板中使用（您已经在这里完成，只是缺少分配。）

@Select(StoryState.currentJobsStories) currentJobsStories$: Observable<Story[]>;

myCurrentJobsStories$: Observable<Story[]>;

ngOnInit(): void {

 this.myCurrentJobsStories$ = this.currentJobsStories$.pipe(
      map(story => {
        this.filteredStories = [...story];
        return story;
      }),);
}

然后，在组件模板中，您需要通过Observable订阅新的myCurrentJobsStories$ | async

angular angular ngxs rxjs rxjs