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

Question

我正在使用数组创建一个可观察量。当我调用订阅方法时，它的长度变成双倍。

如果数组在订阅后有 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

Answer 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.of创建一个可观察量，该可观察量发出要传递给of()运算符的项。