gpt4 book ai didi

Angular/Firestore - 操作 AngularFirestoreDocument

转载 作者:行者123 更新时间:2023-12-05 04:09:06 25 4
gpt4 key购买 nike

我在用什么

  • Angular
  • Firestore

我要实现的目标

  • 操作文档数据

  • 将返回的日期转换为可读的内容

我有什么

  • 我有一个相册列表,我在其中使用 snapshotChanges 返回映射数据

  • 我有一张 AngularFirestorDocument

  • 相册

问题

  • 如何像在相册列表组件中那样操作相册组件中的返回日期?

专辑列表

所以这个组件会正确地返回一个相册列表,我可以在返回它之前操纵日期,以便 HTML 显示正确的格式。

export class AlbumsListCompoment implements OnInit {

private albumCollection: AngularFirestoreCollection<any>;
albumns: Observable<any[]>;
folderId: string;

constructor(
private readonly afs: AngularFirestore,
private activatedRoute: ActivatedRoute,
private router: Router
) {

// Look at the url for the Folder ID and set the local variable
this.activatedRoute.params.forEach((urlParameters) => {
this.folderId = urlParameters['folderId'];
});

// Album Reference "folders/folderid/albums"
this.albumCollection = afs.collection<any>(`folders/${this.folderId}/albums`);

// Get the data
this.albumns = this.albumCollection.snapshotChanges().map(actions => {
return actions.map(a => {

const data = a.payload.doc.data();

// Get the date from each album
var albumDateTimeStapm = data.album_date;

// Convert the unix value and format it based on the users locale setting
var albumDateISO = moment(albumDateTimeStapm).format("DD/MM/YYYY");

// Create a new 'name' to use in the HTML binding
data.formattedDate = albumDateISO;

const id = a.payload.doc.id;
return { id, ...data };
});
});
}

ngOnInit() {

}

}

相册

我没有完全展示如何接近这个组件来执行相同的操作。它不是列表,而是单个文档/相册。

export class AlbumDetails implements OnInit {

folderId: string;
albumId: string;

private albumDoc: AngularFirestoreDocument<any>;
album: Observable<any>;

constructor(
private readonly afs: AngularFirestore,
private activatedRoute: ActivatedRoute,
private router: Router) {

// 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'];
});

this.albumDoc = afs.doc<any>(`folders/${this.folderId}/albums/${this.albumId}`);
this.album = this.albumDoc.valueChanges();


}

ngOnInit() {}

}

任何帮助将不胜感激:)

最佳答案

我不是 100% 确定我理解你的问题。据我了解,您希望获得对文档返回数据的处理,然后在以 HTML 显示之前更改它。

如果是这种情况,您可以执行以下操作:

this.albumDoc = afs.doc<any>(`folders/${this.folderId}/albums/${this.albumId}`);
this.album = this.albumDoc.valueChanges();
this.album.subscribe(value => {
const value1 = value.value1;
const value2 = value.value2;
...
const valueN = value.valueN;
});

如果您还需要返回值的元数据(例如 id),请执行以下操作:

this.albumDoc = afs.doc<any>
(`folders/${this.folderId}/albums/${this.albumId}`);
this.album = this.albumDoc.snapshotChanges();
this.album.subscribe(value => {
const id = value.payload.id;
const value1 = value.payload.data().value1;
const value2 = value.payload.data().value2;
...
const valueN = value.payload.data().valueN;
});

有关这方面的更多信息,请参阅 angularfire2 documentation

关于Angular/Firestore - 操作 AngularFirestoreDocument,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46567114/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com