Question

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

我对Angular和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一次而不是您想要展示的属性的次数。

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

使用RxJS

1 个答案: