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

Question

我正在构建一个Angular 5应用程序，可让您跟踪正在进行的武术比赛的得分。 分数从桌面应用程序输入到数据库中。 然后，webapp从Angular服务获取得分作为单个记分牌对象，该服务调用具有ID的API进行比赛，并使用组件中检索到的对象显示两个战士的得分。 用户将通过单击按钮（或在计时器上）刷新分数。

我对Angular和RxJ都非常陌生，而我遇到的麻烦是找到一个如何做到这一点的例子。

现在，我通过获取所有比赛的记分牌，然后使用map来查找想要的一个，来使它起作用。 感觉很粗糙。

总结一下我需要做什么。 用唯一的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次数就不会超过要显示的属性的次数。

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