Повторная подписка на Angular Async Pipe

Насколько я понимаю, асинхронный конвейер Angular подписывается на открытый для вас Observable в шаблоне HTML. НАПРИМЕР

Составная часть

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?

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


angular observable rxjs async-pipe
person Fergal Rooney    schedule 13.03.2020    source источник
comment
Что вызывает новый запрос?   -  person Kurt Hamilton    schedule 13.03.2020
comment
Например, у вас может быть кнопка обновления. Если я правильно понимаю, оператору async нужно будет снова подписаться на наблюдаемый холодный httpclient.   -  person Fergal Rooney    schedule 13.03.2020

Ответы (2)


arrow_upward
3
arrow_downward

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

компонент

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

    constructor(private http: HttpClient) {}

    ngOnInit() {
     this.getTodos();
    }

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

шаблон

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

демонстрация ????

person malbarmavi    schedule 13.03.2020

arrow_upward
1
arrow_downward

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

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

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

@редактировать

Обновить данные об успехе можно так:


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();
    }
}
person Humberd    schedule 13.03.2020
comment
Что, кажется, имеет место, если наблюдаемые ошибки исчезнут? Я также принимаю участие в сценарии успеха. Если бы я хотел обновить данные из службы. - person Fergal Rooney; 13.03.2020
comment
Спасибо за это решение. Превращает ли это холодное наблюдаемое в горячее? - person Fergal Rooney; 13.03.2020
comment
То есть шаблон теперь подписан на тему, которая не отправляет полное событие? Значит, подписка на todos $ остается в силе? - person Fergal Rooney; 13.03.2020
comment
@FergalRooney точно. Запрос выполнен, но подписка не выполнена. - person Humberd; 13.03.2020