合并两个可观察对象,单个输出

时间:2018-11-21 19:15:36

标签: javascript angular rxjs reactive-programming

大家好,我试图掌握RxJS lib和反应式编程的整个思想。 我正在尝试将两个可观察对象合并为一个。第一个可观察对象包含对象数组class UserActivity : AppCompatActivity() { @Inject lateinit var userViewModelFactory2: UserViewModelFactory2 override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_user) appComponent.inject(this) val userId = intent.getIntExtra("USER_ID", -1) val viewModel = ViewModelProviders.of(this, userViewModelFactory2.create(userId)) .get(UserViewModel::class.java) viewModel.greeting.observe(this, Observer { greetingText -> greetingTextView.text = greetingText }) } } ,第二个可观察对象包含字符串数组,然后我将其转换为DefectImages[]数组。之后,我想将这两个可观察值合并为一个。

在我的代码下面:

DefectImages[]

该种类的工作与我期望的一样,但此合并的观测值连接到html角度模板。

const observable = CachedPhotosBuffer.getInstance().asObservable()
      .pipe(
        switchMap(data => {
          return data.map((url) => DefectImage.createTempImage(url, 'you', Date.now()));
        })
        );
    this.observable = Observable.create(observer => observer.next(this.defectImages));
    this.observable.pipe(
      merge(observable)
    ).subscribe(data => console.log('merge', data))

这是我正在获取的控制台日志 enter image description here

我的问题是,为什么每个流都有两个单独的日志,而不是一个控制台日志包含所有数据?

1 个答案:

答案 0 :(得分:5)

合并可观察对象意味着由两个可观察对象发出的项目将由新合并的可观察对象(this page)连续并分别发出。如果您的可观察对象每个仅发出一项,并且您希望通过连接数组来合并这些项目,则可以如下使用zip operator

zip(observable, this.observable)
  .pipe(map(x => x[0].concat(x[1])))
  .subscribe(data => console.log('merge', data))

更准确地说,zip(obsa, obsb)创建了一个新的可观察对象,可监听obsa和obsb,并且在接收来自obsa的itema和来自obsb的itemb之后会发射项目x=[itema, itemb]。在您的情况下,x[0]=itemax[1]=itemb是数组,而(x => x[0].concat(x[1]))将这两个数组连接在一起。请注意,如果obsa和obsb发出多个数组,则在发出新的[itema, itemb]之前,压缩的可观察对象将始终等待obsa和obsb的一项。对于concat()方法,请参见this page

别忘了import { zip } from 'rxjs'import { map } from 'rxjs/operators'