可观测值 Angular 6

Question

这就是我实现异步可观察对象的方式。它每 1 分钟运行一次 api。然而，当我在 html 上调用它时，它说 Cannot read 属性 'course' of null。不知道该怎么做。

<div class="col-12 col-md-6 col-lg-3" *ngFor="let course of (courses$ | async).course;">

@Input() courses$: Observable<any>;
private courseSubscription: Subscription
getCourses() {
    this.isLoading=true;
    this.courses$ = Observable.create(observer => {
      setInterval(() => {

        observer.next(this.coursemoduleService.getCourses());
      }, 1000)
    })

    this.courseSubscription = this.courses$.subscribe(
      data => {
        this.courses$ = data;
        // console.log(data);
        this.isLoading=false;
      }, error => {
        // console.log(error);
        this.isLoading=false;
      }
    )
  }

我试过这样做：

<div class="col-12 col-md-6 col-lg-3" *ngFor="let course of (courses$ | async)?.course;">

但它会继续按字面意思重新加载页面。它应该只重新加载 api 而不会重新加载页面。

Answer 1

使用 rxjs 内置的 interval() 函数，它创建一个 Observable 基础间隔。简单导入：import { interval } from 'rxjs'; 版本 6+，或更早的用例：Observable.interval。例如：

this.courses$ = interval(1000).pipe(
      switchMap(() => this.coursemoduleService.getCourses()),
      catchError((err) => {
        this.isLoading = false;
        return of(err);
      }),
      tap((data) => this.isLoading = false),
);

并且不要重新分配 this.courses$ 变量，因为这个变量包含你的 Observable。在此之后，您在模板中的异步管道将起作用。

Answer 2

使用 this.courses = data; 代替 this.courses$ = data; 并在 *ngFor

中将 courses$ 替换为 courses

this.courseSubscription = this.courses$.subscribe(
      data => {
        this.courses = data; // Updated here
        // console.log(data);
        this.isLoading=false;
      }, error => {
        // console.log(error);
        this.isLoading=false;
      }
    )

<div class="col-12 col-md-6 col-lg-3" *ngFor="let course of (courses | async)?.course;">

希望对您有所帮助

可观测值 Angular 6

Observables Angular 6

observable

angular

angular6