如何在Angular中对可观测对象进行管道/映射

import { Component } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-example',
  template: `
    <div>{{ data | uppercase }}</div>
  `
})
export class ExampleComponent {
  data: Observable<string> = new Observable<string>();

  constructor() {
    this.data = new Observable<string>(observer => {
      observer.next('hello world');
    });
  }
}

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

@Component({
  selector: 'app-example',
  template: `
    <div>{{ transformedData }}</div>
  `
})
export class ExampleComponent {
  data: Observable<number> = new Observable<number>();
  transformedData: Observable<string>;

  constructor() {
    this.data = new Observable<number>(observer => {
      observer.next(10);
    });

    this.transformedData = this.data.pipe(
      map(value => `Transformed value: ${value}`)
    );
  }
}