如何解决如何正确订阅发出不同HTTP Get请求的服务? [角度]
我正在尝试订阅一种从API加载电影数据的服务方法。无论何时执行搜索,它都会搜索具有新ID的其他电影。如何从组件中订阅?
到目前为止我所做的:
服务:
search(id): Observable<Movie> {
return this.http.get<Movie>('https://api.themoviedb.org/3/movie/' + id + '?api_key=KeyHidden&language=en-US');
}
组件:
export class TitleComponent implements OnInit {
movie: Movie;
constructor(public ms: MovieService) {}
ngOnInit() {
this.ms.search(this.ms.movieid).subscribe(data => this.movie = data);
}
}
执行搜索的按钮:
<button type="submit" mdbBtn (click)="ms.search(ms.movieid)" id="sub"> Search
</button>
接口电影:
export interface Movie {
title: string;
}
- 为应用程序提供服务会引发错误,因为默认情况下id是未定义的。如何订阅而不会出现错误。
- 为什么搜索按钮不起作用?
- 如何只获取接口中定义的值,而丢弃其他所有内容?
解决方法
搜索按钮可能起作用,但是您没有收听结果。
您在ngOnInit
中进行了预订,但是它本身仅获取值一次(具有未定义的ID,这会引发错误)。
您可能想要的是在服务中设置一个可观察对象(一个实际属性),然后单击按钮,而不是调用search
,然后在其中使用{{ 1}}。这样,组件将收到有关结果的通知。
大致情况:
MovieService:
.next(value)
TitleComponent
private _movie$: BehaviourSubject<Movie> = new BehaviorSubject(null);
movie$ = this.movie$.asObservable();
search(id) {
this.http.get<Movie>(...).pipe(take(1)).subscribe(data => this.movie$.next(data));
}
,
我个人更喜欢创建一个单击的Observabe(请参阅Observable from <button> click event in Angular2),然后将其切换到结果,并使用异步管道进行订阅。
movie$ = clicked$.pipe(
switchMap(() => this.movieServic.search(movieId)),);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。