Angular Asyn c Повторная подписка на трубы

Question

Я понимаю, что Angular asyn c pipe - это то, что он подписывается на открытую для вас Observable в шаблоне HTML. EG

Компонент

export class TestComponent {
    let todos$: Observable<Array<Todo>>;

    constructor(private http: HttpClient) {}

    ngOnInit() {
        this.todos$ = this.http.get<Array<Todos>>(...)
    }
}

Шаблон

<div *ngFor="let todo of todos$ | async">
    {{ todo }}
</div>

Насколько я понимаю, HttpClient Observable будет генерировать следующие события для успеха:

next(value)
completed

и по ошибке

error(error)
completed

Когда наблюдаемое излучает завершенное событие, подписка закрывается.

Поэтому, если вы подписаны на наблюдаемую холодную ситуацию, такую ​​как Angulars HttpClient Observable, как вы повторить запрос HttpClient?

Оператор asyn c выполняет начальную подписку, но будет закрыт, как только будет завершена холодная наблюдаемая, как заставить оператор asyn c повторно подписаться, если вы захотите выполнить его снова? например, если вы хотите обновить sh данных.

Answer 1

просто переназначить todos $, это снова вызовет http-запрос

component

export class TestComponent {
    public todos$: Observable<Array<Todo>>;

    constructor(private http: HttpClient) {}

    ngOnInit() {
     this.getTodos();
    }

    getTodos(){
        this.todos$ = this.http.get<Array<Todos>>(...);
    }
}

template

<button (click)="getTodos()" >Refresh ?</button>

демо ?

Answer 2

У вас есть операторы retry и retryWhen. Играйте с ними:)

https://rxjs-dev.firebaseapp.com/api/operators/retry

https://rxjs-dev.firebaseapp.com/api/operators/retryWhen

@ edit

Кому Refre sh данные об успехе, вы можете сделать это так:

export class TestComponent {
    refresh$ = new BehaviorSubject(true);
    todos$: Observable<Array<Todo>>;

    constructor(private http: HttpClient) {}

    ngOnInit() {
        this.todos$ = this.refresh$
            .pipe(
                 switchMap(() => this.http.get<Array<Todos>>(...))
            )
    }

    refreshData() {
        this.refresh$.next();
    }
}