Angular5 valuechanges（）函数发生了什么？ （angularfire2）

Question

我试着理解.valueChanges（）和.subscribe（） 我使用 AngularFire2 和 Angular5

我的代码有效，但我不了解它是如何工作的。

我的组件：

ngOnInit() {
    this.itemService.getLastUnicorns().subscribe(items => {
        this.items = items;
        console.log(items);
    });
}

console.log提供了一个漂亮的数组：Array [ {…}, {…} ]

我的服务：

getLastUnicorns() {
    this.items = this.afs.collection('unicorns', ref => ref.limit(2)).valueChanges();
    console.log(this.items);
    return this.items;
}

console.log提供Object { _isScalar: false, source: {…}, operator: {…} } euh WTF？

问题：服务中发生了什么事情来提供这个奇怪的对象以及我如何能够恢复组件中漂亮的数组？ 谢谢

Answer 1

因此，当您在AFS中执行.valueChanges（）时，它将返回一个observable。什么是Observable？

  

Observable开辟了一个连续的沟通渠道，随着时间的推移可以发出多个数据值。

因此，要从Observable获取值，您必须订阅它。因此，在您的组件中，您正在订阅它，因此它将在值更改时随时记录实际数组。在您的服务中，您实际上只是记录一个看起来非常奇怪且不会像您期望的那样记录的可观察对象。如果您希望您的服务记录数组，您可以这样做：

this.items = this.afs.collection('unicorns', ref => ref.limit(2))
     .valueChanges()
     .subscribe(data=>{
         console.log(data);
        })

希望有所帮助，如果您需要进一步澄清，请与我们联系。

Answer 2

可能不相关但请保持温和 - 我在寻找收听收集更改并获取文档参考的方法时发现了这个问题。 我用了

  private projectsCollection: AngularFirestoreCollection<any>;
  projects: QueryDocumentSnapshot[];


    this.projectsCollection = this.angularFireStore.collection('projects');

    this.projectsCollection.snapshotChanges().subscribe(data => {
      this.projects = data.map(data => data.payload.doc)
    });

然后我显示它们有点像这样

<ul>
  <li *ngFor="let project of projects">
    {{ project.data() | json }}
    <button (click)="delete(project.ref)">Delete</button>
  </li>
</ul>

这样我就可以显示数据输出，也可以使用同一个数组中的文档引用。因此，如果我使用文档引用从集合中删除-it更新数组，从而立即更新显示的列表

Answer 3

AngularfireList具有各种属性。但是其中两个是valueChanges（） 和snapshotChanges（）。如果您通常这样做，请执行this.itemService.getLastUnicorns（）;。 它将返回AngularFireList对象。因此，您可以通过执行以下操作将此对象更改为可观察对象。itemService.getLastUnicorns（）。valueChanges（）; 现在它将返回像这样的简单观测值

``Observable {_isScalar: false, source: Observable, operator: ObserveOnOperator}``

现在.susbsribe（re => {console.log（re）}）;将存在的数组打印到返回的数组中 可观的

Blockquote和snapshotChanges（）返回具有其他属性的复杂数据结构 enter link description here