Question

我在Observable的{{1}}字段中errors$：

LoginComponent

其中private alerts: Array<Object>; private errors$: Observable<IError>; constructor() { this.alerts = []; this.errors$ = //initialization... }是：

IError

目前，我手动创建了对此export interface IError { code: string; timestamp: string; msg: string; type: string; }的订阅：

Observable

其中

this.errorsSub = this.errors$.subscribe(
    (error: IError) => {
        if (error.code != null)
            this.addAlert(error.msg);
        else
            this.clearAlerts();
    }
);

我使用private addAlert(message: string): void { this.alerts.push({type: 'danger', msg: message}); } private clearAlerts(): void { this.alerts.splice(0, this.alerts.length); }在我的html中绑定alerts数组：

ngFor

所以，我想使用<div <alert *ngFor="let alert of alerts; let i = index" [type]="alert.type + ' alert-sm'" (close)="closeAlert(i)" dismissible="true"> <div [innerHTML]="alert.msg"></div> </alert> </div>管道来做到这一点。我知道这是可能的，但我不太清楚如何做到这一点......我只想显示最后通知错误已被通知。

所以目标是删除async数组。

我不知道我是否解释得那么好。

Answer 1

|async管道用于订阅observable。如果将数据推送到数组中，它就不再是可观察数据了：

<alert *ngFor="let alert of errors$; let i = index"

<强>更新

<alert [type]="(errors$ | async).type + ' alert-sm'" (close)="closeAlert()" dismissible="true">
    <div [innerHTML]="(errors$ | async).msg"></div>
</alert>

Answer 2

async管道只是订阅Observable并打印最新发出的项目。因此，在您的情况下，您需要创建另一个Observable，它将使用error.code != null过滤所有项目，并在其上使用async。

this.errorsFiltered$ = this.errors$
    .filter(error => error.code != null)
    .share();

然后订阅此Observable：

<alert *ngIf="errorsFiltered$ | async" [type]="(errorsFiltered$ | async).type + ' alert-sm'"  ....>
    ...
</alert>

我正在使用share()始终只为源Observable创建一个订阅。但是，根据this.errors$的来源，可能没有必要。如果是HTTP请求，则会在没有share()的情况下进行多次订阅。

使用async而不是.subscribe

2 个答案: