我正在开发一个Angular 5应用程序,我有一个用于存储数据的API。问题是我有两个组件,一个用于显示数据,另一个用于发布数据。
它们都通过具有两个功能的服务与API交互:
addCandidate(candidate: Candidate): Observable<Candidate> {
this.candidatesList.next(this.http.get(this.apiUrl));
return this.http.post<Candidate>(this.apiUrl, candidate, httpOptions);
}
listCandidates(): Observable<Candidate[]> {
return this.http.get(this.apiUrl).map(res => <Candidate[]>res);
}
组件具有订阅服务的方法:
saveCandidate(): void {
if(this.candidate.skills.indexOf(', ') >= 0) {
this.candidate.skills = (<string>this.candidate.skills).split(', ');
}
this.candidatesService.addCandidate(this.candidate).subscribe();
}
分别(这个是在init上):
ngOnInit() {
this.candidatesService.listCandidates().subscribe(candidates => this.candidates = candidates);
}
所以,因此我真的不知道api何时更新,我想在saveCandidate()方法采取行动后更新列表。
如何使用新的api数据更新一个组件,然后再提交给服务?
旁注:我尝试使用rxjs Subject.asObservable()。next(.. http请求)。但是Observable.next不是一种方法。也许我误用了它们。
答案 0 :(得分:2)
您尝试的方法(即Subject
)是解决此问题的正确方法。
使用this link来提高您对Subject
的理解,并遵循以下几点:
'Data Changed'
让主题使用字符串值(例如,this.candidatesService.mySubject.next('Data Changed')
)发出事件。在您列出数据的组件中订阅此Subject
,并在订阅方法中将您的服务方法调用get
,如下所示:
this.candidatesService.mySubject.subscribe((value) => {
this.candidatesService.listCandidates().subscribe(candidates =>
this.candidates = candidates);
});
这可以解决您的问题。
答案 1 :(得分:1)
您可以使用将存储状态对象的BehaviorSubject创建服务,例如:候选人集合。一个组件将使用该主题上的next()来添加候选者,另一个组件将订阅以获取当前候选者列表。 我录制了一段20分钟的视频,可以帮助您了解如何实施:https://www.youtube.com/watch?v=NYNEH_k0e_4