Question

我通过Angular Firestore软件包使用Ionic和Google的Cloud Firestore从firestore中的对象集合加载一些数据。

我有以下代码（为此示例缩减）以加载计划对象列表：

@Component({
  selector: 'page-schedule',
  templateUrl: 'list.html'
})
export class SchedulePage {
  itemsCollection: AngularFirestoreCollection<Schedule>;
  items: Observable<Schedule[]>;
  constructor(
    public db: AngularFirestore) {
  }
  ionViewDidLoad() {
    let loader = this.loadingCtrl.create({
      content: "Loading..."
    });

    loader.present().then(() => {
      this.itemsCollection = this.db.collection('userschedules');
      this.items = this.itemsCollection.valueChanges();
      loader.dismiss();
    });
  }  
}

然后我有一个模板，其中包含以下内容：

<ion-item class="text" *ngFor="let item of items | async">
    ...
</ion-item>

这一切都很好用。

但是，我希望能够在加载每个项目时进行第二次调用，并从我构建的另一个API中检索列表中显示的每个项目的状态，并将该调用的结果提供给可视指示器在列表中的项目。

我是Observables的新手，不知道我可以在哪里接听我需要的电话。我该如何拨打电话？

Answer 1

您可以在查询结果中使用observable，并将组件订阅到这些可观察对象。

// within service that colects documents from firestore
 
import { Injectable                    } from '@angular/core';
import { BehaviorSubject               } from 'rxjs/BehaviorSubject';
import { AngularFirestore,
         AngularFirestoreCollection,
         AngularFirestoreDocument      } from 'angularfire2/firestore';
import * as firebase from 'firebase';

@Injectable()
export class SomeService {

something_retrieved$ = new BehaviorSubject<any>({});

 getSomething = () => {
    const collection = this._fireStore.collection('some_key');
    const collection_data = prod_coll.valueChanges();
    collection_data.map( data => this.something_retrieved$.next(data) ).subscribe((query) => {});
  };
 
 }

// within some component

import { Component     } from '@angular/core';
import { SomeService   } from '@services/some.service';

@Component({
  selector    : 'app-element',
  templateUrl : './element.component.html',
  styleUrls   : [ './element.component.scss' ]
})
export class SomeComponent {

  constructor( private _service: SomeService ) {
    _service.something_retrieved.subscribe( retrieved => this.doSomething() )
  }

  doSomething = () => ... your secondary action
 }

如何检测使用AngularFire

1 个答案: