Наблюдаемые Angular 6 - PullRequest
Новая
       16

Наблюдаемые Angular 6

1 голос
/ 22 января 2020

Вот как я реализовал свои асин c наблюдаемые. Он запускает API каждые 1 минуту. Однако когда я вызвал его на html, его поговорка не может прочитать свойство 'course' из 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 без перезагрузки страницы.

Ответы [ 2 ]

1 голос
/ 22 января 2020

Используйте встроенную функцию rx js 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. После этого ваш asyn c pipe в шаблоне будет работать.

0 голосов
/ 22 января 2020

Вместо this.courses$ = data; используйте this.courses = data; и замените courses$ на courses в *ngFor

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;">

Надеюсь, это поможет

...