使用RxJS更新单个对象的最佳实践

Question

我正在构建一个角形5应用程序，让我们跟踪正在进行的武术比赛的得分。分数是从桌面应用程序输入到DB的。然后，webapp从一个带有匹配Id的API调用一个带有匹配Id的API，并使用组件中的检索对象来显示两个战士的得分，作为一个单一记分板对象获取分数。用户将通过单击按钮(或者可能是在计时器上)刷新分数。

我对RxJ和RxJ都很陌生，我遇到的麻烦是找到了一个如何做好这一点的例子。

现在，我已经得到了所有比赛的记分板，然后使用地图和查找筛选出我想要的那个。感觉很粗糙。

总结一下我需要做的。使用唯一Id调用服务方法。使用Id从API中获取一个对象。将该对象返回给组件并将其分配给属性。

任何和所有的建议都是非常感谢的！

Answer 1

在您的服务中，应该有一个返回单个Score的方法。类似于：

getSingleScore(id:string):Observable<Score>{
   return yourHttpCallToAPI...
}

然后，在您的组件中，您可以拥有一个获取Observable的属性。

singleScore$:Observable<Score>;

ngOnInit(){
   this.singleScore$ = myService.getSingleScore(id);
}

最后，在模板中，将singleScore$与async管道绑定：

<div *nfIg="singleScore$ | async as score">Whatever property: {{score.whatever}}</div>

PS。

...*nfIg="singleScore$ | async as score"是一个很好的实践，因为这样您只解析async一次，而不像您想要显示的属性那样多次解析async。

参考文献：https://angular.io/api/common/NgIf#storing-conditional-result-in-a-variable