Angular5 valuechanges() 函数发生了什么？（角火2）

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: {…} } 呃 WTF ?

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

Answer 1

因此，当您在 AFS 中执行 .valueChanges() 时，它将成为 return 可观察对象。什么是 Observable？

Observables open up a continuous channel of communication in which multiple values of data can be emitted over time.

因此，要从 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>

这样我就可以显示数据输出，还可以使用同一数组中的文档引用。因此，如果我使用文档引用从集合中删除 - 它会更新数组，从而一次性更新所有显示的列表

Answer 3

AngularfireList 有各种属性。但其中两个是 valueChanges() 和 snapshotChanges() 。如果你通常这样做 this.itemService.getLastUnicorns(); 它将 return 是 AngularFireList 对象。因此您可以通过执行 this.itemService.getLastUnicorns().valueChanges(); 将此对象更改为可观察对象。现在它将 return 像这样的简单观察

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

现在.susbsribe(re => {console.log(re)});将存在于 returned 中的数组打印出来可观察

Blockquote and snapshotChanges() return the complex data structure with other properties enter link description here

Angular5 valuechanges() 函数发生了什么？（角火2）

Angular5 what's happened with valuechanges() function ? (angularfire2)

subscribe

observable

angularfire2

angular5

Angular5 valuechanges() 函数发生了什么？ （角火2）

Angular5 what's happened with valuechanges() function ? (angularfire2)

subscribe

observable

angularfire2

angular5

Angular5 valuechanges() 函数发生了什么？（角火2）