在 Angular Firestore 中引用文档上的字段

Question

我正在尝试引用 component.ts 文件中文档的其中一个字段。 只要我明确声明let day = "Sunday"，下面的代码就可以工作。

由于 this.meter 中有一个字段“day”，我希望能够改为声明 let day = this.meter.day。我知道我必须以某种方式订阅this.meter，但我不知道如何订阅。

我浏览了所有文档，完全不知所措，非常困惑，因为这应该是一个相对简单的操作。

谢谢。

import { Component, OnInit, ViewChild, ElementRef, HostListener, AfterViewInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection, AngularFirestoreCollectionGroup } from '@angular/fire/firestore';
import { Observable, Subscriber } from 'rxjs';
import { ActivatedRoute } from '@angular/router';

export interface Meter { meter: string; units: number; lastupdated: string; year: string; month: string; day: string; monthday: string}

@Component({
  selector: 'app-meter',
  templateUrl: './meter.component.html',
  styleUrls: ['./meter.component.scss']
})

export class MeterComponent implements OnInit {
  meterId: string;
  private meterDoc: AngularFirestoreDocument<Meter>;
  meter: Observable<Meter>;
  dailydata: Observable<any>;
  todayinweek: Observable<any>;
  pastweek: Observable<any>;
  day: string;

  constructor(
    private route: ActivatedRoute, private db: AngularFirestore, private afs:AngularFirestore) {
    this.meterId = this.route.snapshot.paramMap.get('id');
    this.meter = this.afs.doc<Meter>(`meters/${this.meterId}`).valueChanges();
    }

ngOnInit() {


**//let day = this.meter.day;**
let day = "Sunday";


 this.dailydata = this.db.collection('meters').doc<any>(this.meterId).collection('dailydata').doc(day).valueChanges();
 this.todayinweek = this.db.collection('meters').doc<any>(this.meterId).collection(('meterdata'), ref=> ref.where("day", "==", day).limit(10)).valueChanges();
 this.pastweek = this.db.collection('meters').doc<any>(this.meterId).collection(('meterdata'), ref=> ref.orderBy("date", "desc").limit(7)).valueChanges();

 }

}

我已尝试关注Get field from Firestore document，但它对我不起作用。我收到一条错误消息，提示“'Observable' 类型上不存在属性 'then'”

Answer 1

你可以让每个变量都成为可观察的，让数据流过你的组件:)

首先，您从可观察的路由参数中获取当前 id，然后您将获得带有 id 的仪表 angularfire 集合。

然后从这个id结合meter observable，就可以得到所有其他的值了。

readonly meterDoc = this.route.paramMap.pipe(
  map((params) => params.get('id')),
  distinctUntilChanged(),
  map((id) => this.db.collection('meters').doc<Meter>(id)),
  shareReplay({ refCount: true, bufferSize: 1 })
);

readonly meter = this.meterDoc.pipe(
  map((meter) => meter.valueChanges())
);

readonly docMeter = combineLatest([
  this.meterDoc,
  this.meter
]);

readonly dailydata = this.docMeter.pipe(
  switchMap(([ doc, meter ]) => doc.collection('dailydata').doc(meter.day).valueChanges())
);

readonly todayinweek = this.docMeter.pipe(
  switchMap(([ doc, meter ]) => doc.collection(
    'meterdata',
    ref => ref.where("day", "==", meter.day).limit(10)
  ).valueChanges())
);

readonly pastweek = this.meterDoc.pipe(
  switchMap((doc) => doc.collection(
    'meterdata',
    ref => ref.orderBy("date", "desc").limit(7)
  ).valueChanges())
);

_{未经测试的代码}

---

尽管您不愿意将所有内容都移动到流中，但您拥有的所有数据都是异步的。但幸运的是，您还有其他选择。您可以使用路由解析器来获取仪表，并在您的组件中读取：

@Injectable({ providedIn: 'root' })
export class MeterResolve implements Resolve<Meter> {
  resolve(route: ActivatedRouteSnapshot): Observable<Meter> {
    return this.db.collection('meters')
      .doc<Meter>(route.params.id)
      .valueChanges()
      .pipe(
        take(1)
      );
  }
}

将此添加到您的 id 路由：

{ route: 'meter/:id', component: MeterComponent, resolve: { meter: MeterResolve } } 

然后您可以在您的组件中阅读此内容：

readonly meterId = this.route.snapshot.params.id;
readonly meter = this.route.snapshot.data.meter;
readonly meterDoc = this.db.collection('meters').doc<Meter>(this.meterId);
readonly dailydata = this.meterDoc.collection('dailydata').doc(this.meter.day).valueChanges();
readonly todayinweek = this.meterDoc.collection(
    'meterdata',
    ref => ref.where("day", "==", this.meter.day).limit(10)
  ).valueChanges();
readonly pastweek = this.meterDoc.collection(
    'meterdata',
    ref => ref.orderBy("date", "desc").limit(7)
  ).valueChanges();

---

如果出于某种原因，您甚至不想使用解析器，您也可以在您的 ngOnInit 中进行订阅，然后从那里开始.. 但是.. 请不要:)（这是基于代码在你的问题中）

ngOnInit() {
  this.meter.pipe(
    take(1)
  ).subscribe(({ day }) => {
    this.dailydata = this.db.collection('meters').doc<any>(this.meterId).collection('dailydata').doc(day).valueChanges();
    this.todayinweek = this.db.collection('meters').doc<any>(this.meterId).collection(('meterdata'), ref=> ref.where("day", "==", day).limit(10)).valueChanges();
    this.pastweek = this.db.collection('meters').doc<any>(this.meterId).collection(('meterdata'), ref=> ref.orderBy("date", "desc").limit(7)).valueChanges();  
  });
}