Angular 5如何让一系列可观察的运算符像函数一样，避免多次重写代码？

npm install rxjs

import { map, filter, switchMap } from 'rxjs/operators';

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { map, filter } from 'rxjs/operators';

@Component({
  selector: 'app-example',
  template: `
    <button (click)="getData()">Get Data</button>
    <div>{{ result }}</div>
  `
})
export class ExampleComponent {
  result: string;

  getData(): void {
    this.getDataObservable()
      .pipe(
        filter(data => data !== null),
        map(data => data.toUpperCase())
      )
      .subscribe(data => {
        this.result = data;
      });
  }

  getDataObservable(): Observable<string> {
    // 返回一个可观察对象，可以是HTTP请求、定时器等
    return of('hello world');
  }
}