如何订阅与另一个 Observable 合并的 Observable？答案

【问题标题】：How to subscribe to the Observable merged with another Observable?如何订阅与另一个 Observable 合并的 Observable？
【发布时间】：2017-08-04 05:20:38
【问题描述】：

更新：

似乎我从错误的地方导入了 Observable...这太令人困惑了，因为我有这个声明 import 'rxjs/add/observable/fromevent';...

所以我改变了： import { Observable } from 'rxjs/observable'; 到： import { Observable } from 'rxjs';

现在得到不同的错误：

ERROR TypeError: 无效的事件目标

更新结束

export class AppComponent { 

  @ViewChild('b') button;

  posts: any[];
  clickStream$: Observable<any>;

    constructor(http: Http){  
       this.clickStream$ = Observable.fromEvent(this.button, 'click').mergeMap(
         () => {
           var randomOffset = Math.floor(Math.random() * 500);
           return http.get('https://api.github.com/users?since=' + randomOffset);
         });
    }  

    ngOnInit() {
      this.clickStream$.subscribe(res => { this.posts = res.json()});
    }
}

在这里我得到一个按钮点击流，然后我希望它合并到来自get 方法的其他可观察对象，但在 url 末尾带有随机数。所以我的最终目标是每次单击按钮时呈现不同的 API 用户列表。

HTML：

<button>Click</button>

<div *ngFor="let post of posts">
{{ post.login }}
</div>

控制台错误：

错误类型错误： WEBPACK_IMPORTED_MODULE_1_rxjs_observable.Observable.fromEvent 不是函数

【问题讨论】：

标签： angular rxjs

【解决方案1】：

不完全确定我所做的一切，但似乎可以使用：

import { Component, ViewEncapsulation, OnInit, OnChanges, SimpleChanges, ViewChild, ElementRef } from '@angular/core';
import { initializeApp, database } from 'firebase';
import { Observable } from 'rxjs';
import { Http } from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { 

  @ViewChild('b') button: ElementRef;

  posts: any[];
  clickStream$: Observable<any>;

    constructor(private http: Http){  
    }  

    ngOnInit() {
       this.clickStream$ = Observable.fromEvent(this.button.nativeElement, 'click').mergeMap(
         () => {
           var randomOffset = Math.floor(Math.random() * 500);
           return this.http.get('https://api.github.com/users?since=' + randomOffset);
         });

      this.clickStream$.subscribe(res => { this.posts = res.json()});
    }
}

【讨论】：

【解决方案2】：

试试这个：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';

【讨论】：

抱歉，您的问题似乎已解决）