Question

我的Angular 2应用程序中有一个TypeScript函数，它返回一个Observable，将Web API数据推送回消费者，如下所示：

public getApiData(): Observable {
    let readySource = Observable.from('no', 'no', 'ready');
    let dataSource = http.get('api/getData');
    // ... magic here
    return chainedObservable;
}

但是，我不是像往常一样返回http.get Observable，而是需要将此HTTP调用链接到另一个readySource Observable，指示API是否已准备好调用（它实际检查是否为后台数据）同步作业已经完成。）

如何将这两个Observable链接在一起，因此只有在readySource推送特定值时才会调用HTTP调用，例如＆＃34;准备＆＃34;

（请注意，vanilla flatMap / selectMany在这里并不完全符合要求，因为我需要等到第一个Observable在调用第二个之前推送一个特定的值。）

Answer 1

我会将filter运算符与flatMap运算符混合。以下示例描述了当用户填写特定值时如何触发请求（＆＃39;准备就绪）：

@Component({
  selector: 'my-app',
  template: `
    <input [ngFormControl]="ctrl"/>
    <button (click)="onClick()">Click</button>
  `
})
export class AppComponent {
  constructor(private http:Http) {
    this.ctrl = new Control();
    let readySource = this.ctrl.valueChanges.filter((val) => val === 'ready');
    readySource.flatMap(() => http.get('data.json')).subscribe(() => {
      console.log('test');
    });
  }
}

请参阅此plunkr：https://plnkr.co/edit/yZL1wRw7GYhUkkhnL9S0?p=preview

在Angular 2中链接RxJs Observables

1 个答案: