Angular 异步管道重新订阅

Question

我对 Angular 异步管道的理解是，在 HTML 模板中为您订阅公开的 Observable。 E.G

组件

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

当 observable 发出完成事件时，订阅关闭。

因此，如果您订阅了像 Angulars HttpClient Observable 这样的冷可观察对象，您如何重试该 HttpClient 请求？

async operator 进行了初始订阅，但是一旦cold observable 完成就会关闭，如果你想再次执行它，你如何让async operator 重新订阅？例如，如果您想刷新数据。

Answer 1

您有一个 retry 和 retryWhen 运算符。和他们一起玩:)

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

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

@edit

要刷新成功数据，您可以这样做：


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();
    }
}

Answer 2

只需重新分配 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>

demo

Angular 异步管道重新订阅

Angular Async Pipe Re-Subscribe

observable

rxjs

angular

async-pipe