Angular 异步管道重新订阅

Fer*_*ney 1 observable rxjs angular async-pipe

我对 Angular 异步管道的理解是,它在 HTML 模板中为您订阅公开的 Observable。例如

成分

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

    constructor(private http: HttpClient) {}

    ngOnInit() {
        this.todos$ = this.http.get<Array<Todos>>(...)
    }
}
Run Code Online (Sandbox Code Playgroud)

模板

<div *ngFor="let todo of todos$ | async">
    {{ todo }}
</div>
Run Code Online (Sandbox Code Playgroud)

我的理解是 HttpClient Observable 将发出以下成功事件:

next(value)
completed
Run Code Online (Sandbox Code Playgroud)

和错误时

error(error)
completed
Run Code Online (Sandbox Code Playgroud)

当可观察对象发出已完成事件时,订阅将关闭。

因此,如果您订阅了像 Angulars HttpClient Observable 这样的冷 observable,您如何重试该 HttpClient 请求?

异步操作符执行初始订阅,但一旦冷可观察完成就会关闭,如果你想再次执行它,如何让异步操作符重新订阅?例如,如果您想刷新数据。

mal*_*awi 7

只需重新分配 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>>(...);
    }
}

Run Code Online (Sandbox Code Playgroud)

模板

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

Run Code Online (Sandbox Code Playgroud)

演示