RxJS Angular2组件与可观察对象的交互

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/catch';

data$: Observable<any>;

ngOnInit() {
  this.data$ = this.getData()
    .map(response => response.json())
    .filter(data => data.isValid)
    .mergeMap(data => this.processData(data))
    .catch(error => this.handleError(error));
}

getData(): Observable<Response> {
  // 发起HTTP请求获取数据
}

processData(data: any): Observable<any> {
  // 处理数据
}

handleError(error: any): Observable<any> {
  // 处理错误
}

<div *ngIf="data$ | async as data">
  <!-- 使用数据进行渲染 -->
</div>