Question

我有一个HTML结构，如：

<div *ngFor="#notification of notifications"
      [innerHTML]="notification | notificationHTML">
</div>

和notificationHTML管道：

transform(notification: string, args: any[]): any {
var example: any;
this._service.GetExample(notification)
     .subscribe(e => {
         example = e;
      });
return "<span>" + example + "</span>";
}

问题是example变量等于undefined，因为函数GetExample没有时间按时执行。我该如何解决这个问题？

Answer 1

您可以尝试以下，

从Pipe转换中返回一个Observable，然后使用async pipe

组件模板

 <div *ngFor="#notification of notifications"
   [innerHTML]="notification | notificationHTML | async">
 </div>

<强>管

  notificationObservable: Subject<any> = new Subject<any>();

  transform(notification: string, args: any[]): any {
   this._service.GetExample(notification)
      .subscribe(e => {
         this.notificationObservable.next("<span>" + e+ "</span>");
     });
   return notificationObservable;
  }

以下是Plunker!!

希望这会有所帮助!!

Answer 2

我假设GetExample返回某种可观察量。如果是这样，则无法保证在transform返回之前触发您的订阅。您必须使GetExample方法同步，或者您必须缓存订阅返回的值，并在调用transform时使用它。

* ng用于管道输出过滤

2 个答案: