如何在 Angular 中正确链接依赖的异步管道

Question

我的代码中有 3 个异步管道。

<div>{{formatedData$ | async}}</div>

<div>{{totalStatusData$ | async }}</div>

<div>{{totalPercentageData$ | async}}</div>

component.ts

服务返回的实际数据如下

[{
        "name": "one",
        "steps": [{
                "id": 1,
                "passed": 1,
                "failed": 3
            },
            {
                "id": 2,
                "passed": 4,
                "failed": 0
            }
        ]
    },
    {
        "name": "two",
        "steps": [{
                "id":3 ,
                "passed": 10,
                "failed": 3
            },
            {
                "id": 4,
                "passed": 4,
                "failed": 8
            }
        ]
    }
]

this.formatedData$ = this.service.data().pipe(map(data) => {

return this.formatData1();

})

现在 this.formatedData$ 如下

[{
        "name": "one",
        "passed": 5,
        "failed": 3
    },
    {
        "name": "two",
        "passed": 14,
        "failed": 11
    }
]

this.totalStatusData$=this.formatedData$.pipe(map(data) => {
return formatData2(data)
});

现在 this.totalStatusData$ 如下

    {

        "passed": 19,
        "failed": 14
    }

$totalPercentageData = this.totalStatusData$.pipe(map(data) => {

return this.formatData3(data);

}) 

现在 $totalPercentageData 如下

{

        "passed": "57.57%",
        "failed": "42.42%"
    }

从实际服务数据开始，如何在不破坏 Observable 链的情况下将这些 Observable 链接到 One 而不是 One。

Answer 1

如果我理解正确，您需要向 html 模板提供 3 个不同的转换数据，这些数据由 对异步服务的单次调用返回。

所以，如果是这种情况，可以试试下面的策略，

// create an Observable that subscribes to the source, 
// in this case the service data call, and then shares this one subscription
// with the all other Observables that are created starting from it
this.data$ = this.service.data().pipe(
  share()
)

// then you create ab Observable that performs the first transformation
this.formatedData$ = this.data$.pipe(map(data) => {
  return this.formatData1();
})

// then you create an Observable that performs the second transformation 
// based on the results of the first transformation
this.totalStatusData$ = this.formatedData$.pipe(map(data) => {
   return formatData2(data)
});

// and so on

这里的想法是使用share 运算符只调用一次由this.service.data() 包装的远程API。