Angular Rxjs可观察项目在订阅时计数翻倍

Question

我正在使用数组创建一个可观察对象。 当我调用订阅方法时，其长度变为两倍。

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

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

请检查插栓示例

@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
• NAME2
• NAME3
• 名1
• NAME2
• NAME3

Answer 1

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

我不确定为什么要使用： this.obs = Observable.from(this.arr).toArray()吗？ 您可以使用： this.obs = Observable.of(this.arr) ，导致相同的行为： https : this.obs = Observable.of(this.arr)

我已经更新了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()运算符的项目。