我正在使用什么
- 角
- 火力基地
我在做什么
我点击收藏列表中的一个项目
此项目链接到文档视图
显示文件
我需要更新返回的日期，而不是使用valueChanges() 。
我使用snapshotChanges()更新返回的日期
问题
这大部分工作正常并返回数据，我已正确格式化返回的日期
但是，控制台打印文档 5 次
问题
- 我是否正确地处理了这个问题？由于这也是我可能打算用来从存储中获取downloadURL的方法
- 为什么文档在控制台中出现 5 次？（附截图）
任何帮助将不胜感激！:)
组件 TS
import { Component, OnInit } from '@angular/core';
// Firestore
import { Observable } from 'rxjs/Observable';
import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';
// Routes
import { Router, ActivatedRoute } from '@angular/router';
// Moment JS
declare var moment: any;
@Component({
selector: 'app-albums-detail',
templateUrl: './albums-detail.component.html',
styleUrls: ['./albums-detail.component.css']
})
export class albumsDetailComponent implements OnInit {
folderId: string;
albumId: string;
private albumDoc: AngularFirestoreDocument<any>;
album: Observable<any>;
constructor(
private readonly afs: AngularFirestore,
private activatedRoute: ActivatedRoute,
private router: Router) { }
ngOnInit() {
// Look at the url for the Folder and album ID and set the local variable
this.activatedRoute.params.forEach((urlParameters) => {
this.folderId = urlParameters['folderId'];
this.albumId = urlParameters['albumId'];
});
// Return the albums list
this.getalbumData();
}
getalbumData() {
this.albumDoc = this.afs.doc(`folders/${this.folderId}/albums/${this.albumId}`);
//this.album = this.albumDoc.valueChanges();
this.album = this.albumDoc.snapshotChanges().map(action => {
const id = action.payload.id;
const data = action.payload.data();
// Get the date from each album
var albumDateTimestamp = data.album_date;
// Convert the unix value and format it based on the users locale setting
var albumDateISO = moment(albumDateTimestamp).format("DD/MM/YYYY");
// Create a new 'name' to use in the HTML binding
data.formattedDate = albumDateISO;
console.log(data);
return { id, ...data };
});
}
}组件 HTML
<h1> {{ (album | async)?.album_title }} </h1>
<div>
{{ (album | async)?.album_title }}
{{ (album | async)?.formattedDate }}
{{ (album | async)?.album_client }}
{{ (album | async)?.album_reference }}
</div>更新
我已经在几个地方问过这个问题，并在推特上发了一些运气不佳的人，所以我尝试了一种新方法。我不完全确定它是否干净，但它确实有效。它不再使用 AngularFire，因为我一生都无法弄清楚为什么它会多次打印到控制台。我直接从 firestore 文档中举了一个例子。我有一堆全局变量，我在获取数据后更新它们并将其用于我的数据绑定。感觉就像每次加载页面时它都在获取/读取数据。有没有办法检查？
如果有人可以让我知道这是否是执行此操作的合法方式，那就太棒了：D
getProjectData() {
var db = firebase.firestore();
var docRef = db.collection(`folders/${this.folderId}/albums`).doc(`${this.albumId}`);
docRef.get().then((doc) => {
if (doc.exists) {
console.log("Document data:", doc.data());
var data = doc.data();
var id = doc.id;
this.shazam(data, id);
} else {
console.log("No Such Document");
}
});
}
shazam(data, id) {
var albumTimeStamp = data.album_date;
// Convert the unix value and format it based on the users locale setting
var albumDateIso = moment(albumTimeStamp).format("DD/MM/YYYY");
// Create a new 'name' to use in the HTML binding
data.formattedDate = albumDateIso;
this.albumTitle = data.project_title;
this.albumDate = data.formattedDate;
}