Angular / Firestore - 操作 AngularFirestoreDocument

Question

我在用什么

Angular
Firestore

我想要达到的目标

处理文档数据
将 returned 日期转换为可读的日期

我有什么

我有一个相册列表，我在其中使用 snapshotChanges 到 return 映射数据
我有一个专辑是 AngularFirestorDocument

问题

我如何才能像在相册列表组件中那样在我的相册组件中操作 returned 日期？

专辑列表

所以这个组件会正确地返回一个专辑列表，我可以在 return 它之前操纵日期，以便 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() {}

}

任何帮助将不胜感激:)

Answer 1

我不是 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

Angular / Firestore - Manipulating a AngularFirestoreDocument

firebase

angular

google-cloud-firestore