Question

使用BehaviouSubject的目的是使用单个API调用，并将相同数据传递到同一路径中的多个组件。我能够做到。我无法过滤收到的数据

这里是我创建的Stackblitz小提琴

https://stackblitz.com/edit/angular-xtne5y

在一个组件中，我正在显示表格，在另一个组件中，我需要根据各个对象键值从中提取一些信息。像有多少待办事项是完整的/不完整的。由于我需要在模板的所有位置使用异步管道，因此无法执行诸如filter之类的操作。有没有更好的方法来实现这一点？

我需要保持提取的数据可重复使用

Answer 1

您当前正在使用async管道。为了获得理想的结果，可以将另一个自定义管道与数据一起使用（或链接）以获取特定的属性。

我已经分叉了您的stackblitz示例，并使用解决方案修改了代码。 Here's my working solution。

基本上，您需要做的就是使用自定义管道。

{{ todos$ | async | myCustomFilter }}

在我的示例（堆栈闪电战）中，我正在做

    <p>
      No. of Completed Todos: {{ (todos$ | async | filterByCondition: {property: 'completed', value: true}).length }}
    </p>

    <p>
      No. of Incomplete Todos: {{ (todos$ | async | filterByCondition: {property: 'completed', value: false}).length }}
    </p>

在评论后进行编辑

有两种方法可以达到您想要的结果： 1）使用自定义管道。您可以像我一样对管道进行参数化，甚至可以创建自己的条件并通过将参数传递给管道来进行评估（就像我在示例中为args属性所做的那样）。

即

    <div>{{$todos | async | filterTodo: 'byDate'}}</div>

现在，您可以将此byDate值的处理程序放入管道filterTodo中。

2）对不同的数据使用不同的观测值。

  class MyComponent {
    todos$;
    completedTodos$;
    constructor() {
        this.todos$ = this.someService.getTodos(); // from behavior subject
        this.completedTodos$ = this.todos$.pipe(
            filter((item) => {
                // your filter code here
            })
        )
    }

  }

Answer 2

因此，我从事的项目是创建TODO的部分，我的方法是当您订阅URL来获取数据，创建Redux Store时（这里是[链接] https://medium.com/supercharges-mobile-product-guide/angular-redux-the-lesson-weve-learned-for-you-93bc94391958），它的界面类似于

interface ProductTodos {
    product: {title:string,iscompleted:boolean,id:string/number},
    todos?: any[]
}

获取待办事项时，您将分派“ PUSH”之类的操作，每个待办事项将是product类型的对象，并将附加到接口中的todos数组上。

当您在Component Class中创建Redux Store的实例时，将遍历“ todos”数组并检查id和isCompleted标志。

基于此，您可以遍历每个对象并根据其完成状态填充表格。

这是我在Angular 4中指向ReduxDemo的链接，请查看https://github.com/nerdySingh/ReduxDemoAngular

如何从Angular服务中的Behavior Subject中提取数据？

2 个答案:

在评论后进行编辑