Angular Rxjs Observable 项目在订阅时翻倍

【问题标题】：Angular Rxjs Observable items count doubles on subscribeAngular Rxjs Observable 项目在订阅时翻倍
【发布时间】：2017-10-30 09:36:42
【问题描述】：

我正在使用数组创建一个 observable。当我调用 subscribe 方法时，它的长度会加倍。

即。如果数组在订阅后有 3 个项目，则通过复制相同的项目它变为 6。

我还使用异步管道来列出 html 中的项目。

请查看plunker 示例

@Component({
selector: 'my-app',
template: `
 <div>
   <ul>
      <li *ngFor="let data of obs|async">
      {{data.name}}
      </li>
   </ul>
 </div>
 `
 })

export class App  implements OnInit{

obs: Observable<any>;

arr = [{
   name: 'name1',
   age: 26
  }, {
   name: 'name2',
   age: 27
  }, {
   name: 'name3',
  age: 28
  }];

  constructor() {

  }
  ngOnInit() {

   this.obs = Observable.from(this.arr).toArray()


   this.obs.subscribe(res => {

    console.log(res)
   })
  }
}

输出：

姓名1
名字2
姓名3
姓名1
姓名2
姓名3

【问题讨论】：

标签： angular rxjs observable

【解决方案1】：

在 JSFiddle 中，这对我来说很好用：https://jsfiddle.net/dcuLggwa/1/

我不确定您为什么使用：this.obs = Observable.from(this.arr).toArray()？您可以使用：this.obs = Observable.of(this.arr)，这会导致相同的行为：https://jsfiddle.net/dcuLggwa/2/

我已将 plunkr 更新为使用 Observable.of 而不是 Observable.from(...).toArray()，它工作正常：https://plnkr.co/edit/vaMK6G5AxCSs2kCIJ2h8?p=preview

Observable.from(...).toArray()和Observable.of的区别：

Observable.from 分别从数组中发出每个项目，toArray 等到 observable 完成，然后将所有项目（分别发出）作为数组发出。所以基本上你从一个数组开始，把它分成单独的项目，然后再把它组合成一个数组。

Observable.of 创建一个 Observable，它发出传递给 of() 操作符的项目。

【讨论】：

谢谢.. 使用 Observable.of 解决了这个问题。