Question

我正在尝试订阅一种从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是未定义的。如何订阅而不会出现错误。
为什么搜索按钮不起作用？
如何只获取接口中定义的值，而丢弃其他所有内容？

Answer 1

搜索按钮可能起作用，但是您没有收听结果。

您在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));
}

Answer 2

我个人更喜欢创建一个单击的Observabe（请参阅Observable from <button> click event in Angular2），然后将其切换到结果，并使用异步管道进行订阅。

movie$ = clicked$.pipe(
  switchMap(() => this.movieServic.search(movieId)),
);

如何正确订阅发出不同HTTP Get请求的服务？ [角度]

2 个答案: