RxJS - 未来的插入是不可观察的？

Question

我有一个 HTML 元素：

 <ul id="animals"></ul>

这段代码观察一个数组并将其元素附加为 HTML 元素：

  const zooAnimals = ['anteater', 'bear', 'cheetah', 'donkey'];

  const observable = Rx.Observable.from(zooAnimals);

  const subscriber = observable

    .subscribe(
      onNext,
      function onError(err) {
        console.log('Error: ' + err);
      },
      function onCompleted() {
        console.log('no more animals!');
      }
    );

  function onNext(animal) {
    const list = document.querySelector('#animals');
    console.log('list', list)
    const li = document.createElement('li');
    li.innerHTML = animal;
    list.appendChild(li);
  }

所以现在#animals 元素填充了 4 个ULs。

但现在我想通过setTimeout添加另一个元素

所以我补充：

setTimeout(function (){
  zooAnimals.push('dddddd');
},4000);

但是什么也没发生。

问题

我在这里遗漏了什么，如果其他一些问题将项目附加到数组中，我该如何让这段代码工作。

plunker：

https://plnkr.co/edit/xzyjCOR8lKl3tc70kzC9?p=info

Answer 1

这不是 Observables 的工作方式，在 RxJS 中，一切都是流，要发出新数据，您需要使用 RxJS-api - 有很多方法可以解决您的问题，其中一种是使用 @ 987654324@ - 基本上是Observer 和Observable 的组合，这意味着您可以在其上发出数据并同时订阅它：

  const zooAnimals = ['anteater', 'bear', 'cheetah', 'donkey'];
  const subject = new Rx.Subject();

  const subscriber = subject
    .subscribe(
      onNext,
      function onError(err) {
        console.log('Error: ' + err);
      },
      function onCompleted() {
        console.log('no more animals!');
      }
    );

  function onNext(animal) {
    const list = document.querySelector('#animals');
    console.log('list', list)
    const li = document.createElement('li');
    li.innerHTML = animal;
    list.appendChild(li);
  }

  zooAnimals.forEach(animal => subject.onNext(animal));
  setTimeout(() => subject.onNext("giraffe"), 100);

我也更新了你的 plunker： https://plnkr.co/edit/bx9NtRT0n5HuZQSCcvkH?p=preview

---

附带说明：如果您现在开始接触 RxJS，我建议您使用 RxJS5，这是该库的最新版本。