Angular 引用存储区中文档上的字段

我试图引用component.ts文件中文档的一个字段。 只要我明确声明

let day=“Sunday”

，下面的代码就可以工作

由于this.meter中有一个字段“day”，因此我希望能够声明

let day=this.meter.day

。我知道我必须以某种方式订阅

这个.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();

 }

}

从'@angular/core'导入{Component，OnInit，ViewChild，ElementRef，HostListener，AfterViewInit}；
从“@angular/fire/firestore”导入{AngularFirestore，AngularFirestoreDocument，AngularFirestoreCollection，AngularFirestoreCollectionGroup}；
从“rxjs”导入{Observable，Subscriber}；
从'@angular/router'导入{ActivatedRoute}；
导出接口仪表{Meter:string；units:number；lastupdated:string；年：string；月：string；日：string；月：string}
@组成部分({
选择器：'app meter'，
templateUrl:“./meter.component.html”，
样式URL:['./meter.component.scss']
})
导出类MeterComponent实现OnInit{
梅特里德：字符串；
私有meterDoc:AngularFirestoreDocument；
仪表：可观察；
dailydata:Observable，但它对我不起作用。我收到一个错误，“Property'then'在类型'Observable'上不存在”
您可以将每个变量都设置为Observable，然后让数据流通过组件：）

首先，您从route param observable获取当前id，然后使用该id获取meter angularfire集合

然后从这个id和可观察的仪表结合起来，你可以得到所有其他的值

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)
      );
  }
}

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();

readonly meterId=this.route.snapshot.params.id；
只读仪表=this.route.snapshot.data.meter；
只读meterDoc=this.db.collection（'meters'）.doc（this.meterId）；
readonly dailydata=this.meterDoc.collection（'dailydata'）.doc（this.meter.day）.valueChanges（）；
readonly todayinweek=this.meterDoc.collection(
“meterdata”，
ref=>ref.where（“日”，“本米.日”）。限值（10）
).valueChanges（）；
readonly pastweek=this.meterDoc.collection(
“meterdata”，
ref=>ref.orderBy（“日期”、“说明”）。限制（7）
).valueChanges（）；


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

ngOnInit（）{
这是米管(
采取（1）
).subscribe（{day}）=>{
this.dailydata=this.db.collection（'meters'）.doc（this.meterId）.collection（'dailydata'）.doc（day）.valueChanges（）；
this.todayinweek=this.db.collection（'meters'）.doc（this.meterId）.collection（'meterdata'），ref=>ref.where（'day'，“==”，day）.limit（10））.valueChanges（）；
this.pastweek=this.db.collection（'meters'）.doc（this.meterId）.collection（'meterdata'），ref=>ref.orderBy（“日期”，“描述”）.limit（7））.valueChanges（）；
});
}
您可以使每个变量都是可观察的，只需让数据流通过组件：）

首先，您从route param observable获取当前id，然后使用该id获取meter angularfire集合

然后从这个id和可观察的仪表结合起来，你可以得到所有其他的值

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)
      );
  }
}

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();

readonly meterId=this.route.snapshot.params.id；
只读仪表=this.route.snapshot.data.meter；
只读meterDoc=this.db.collection（'meters'）.doc（this.meterId）；
readonly dailydata=this.meterDoc.collection（'dailydata'）.doc（this.meter.day）.valueChanges（）；
readonly todayinweek=this.meterDoc.collection(
“meterdata”，
ref=>ref.where（“日”，“本米.日”）。限值（10）
).valueChanges（）；
readonly pastweek=this.meterDoc.collection(
“meterdata”，
ref=>ref.orderBy（“日期”、“说明”）。限制（7）
).valueChanges（）；


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

ngOnInit（）{
这是米管(
采取（1）
).subscribe（{day}）=>{
this.dailydata=this.db.collection（'meters'）.doc（this.meterId）.collection（'dailydata'）.doc（day）.valueChanges（）；
this.todayinweek=this.db.collection（'meters'）.doc（this.meterId）.collection（'meterdata'），ref=>ref.where（'day'，“==”，day）.limit（10））.valueChanges（）；
this.pastweek=this.db.collection（'meters'）.doc（this.meterId）.collection（'meterdata'），ref=>ref.orderBy（“日期”，“描述”）.limit（7））.valueChanges（）；
});
}
谢谢，但这对我的问题来说似乎有点难以回答，因为我的问题只是能够写下一行“meter.day”。其他一切都很好，我想知道this.docMeter.pipe是什么（switchMap…正在添加到解决方案中。@EzraButler您的
米。天
来自一个可观察对象，因此您只能从一个可观察对象内部访问它。这意味着依赖于此变量的所有内容也需要是一个可观察对象，这就是上面的代码。您需要的每一个数据都是一个流，您可以使用
async
管道在模板内访问我已经能够使用
aysnc
在模板内访问它，没有问题。我希望能够将该字段用作变量来传递各种其他调用。我需要能够一次性获得该数据。我是否完全错过了一些非常明显的东西？@EzraButler您是：）异步管道也在使用可观测值。但是，您可以先使用
subscribe
在组件内部获取值，然后为其他项创建可观测值，但对于rxjs来说，这是一种非常糟糕的做法。另一种获取您需要的值的方法