如何使用 Angular 从 Firebase 中的“帖子”集合中检索最新帖子？

Question

我是 Firebase 和 Angular 的新手，我正在制作一个 Twitter 模型以供练习。我将其放置在用户可以发布帖子的位置，并将其保存到 Firebase 中的“帖子”集合中。现在，我正尝试将其移至主页上显示最新帖子的位置作为开始。

import { Injectable } from '@angular/core';
import { Post } from 'src/interface';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class PostsService {

  postsCollection = this.afs.collection<Post>('posts');

  constructor(private afs: AngularFirestore) {

  }

  const recentPostQuery: Query<Post> = this.postsCollection.ref.orderBy('timestamp', 'desc').limit(1);
  
}

显然这段代码不起作用。我已经接近了吗？在这种情况下我应该如何设置可观察的？如有任何帮助，我们将不胜感激，谢谢

Answer 1

首先，您需要创建一个返回

Observable

:

的服务

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Post } from 'src/app/interfaces/post.interface';

@Injectable({
  providedIn: 'root'
})
export class PostsService {

  constructor(private afs: AngularFirestore) {}

  getRecentPost(): Observable<Post | undefined> {
    return this.afs.collection<Post>('posts', ref => ref.orderBy('timestamp', 'desc').limit(1))
      .snapshotChanges()
      .pipe(
        map(actions => {
          const data = actions.map(a => {
            const id = a.payload.doc.id;
            const data = a.payload.doc.data() as Post;
            return { id, ...data };
          });
          return data.length > 0 ? data[0] : undefined;
        })
      );
  }
}

其次，创建一个使用服务的组件，如下所示：

import { Component, OnInit } from '@angular/core';
import { PostsService } from 'src/app/services/posts.service';
import { Post } from 'src/app/interfaces/post.interface';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  recentPost: Post | undefined;

  constructor(private postsService: PostsService) {}

  ngOnInit(): void {
    this.postsService.getRecentPost().subscribe(post => {
      this.recentPost = post;
    });
  }
}

第三，下面是从 Firestore 接收数据以显示检索到的值的组件 HTML：

<div *ngIf="recentPost">
  <h2>{{ recentPost.title }}</h2>
  <p>{{ recentPost.content }}</p>
  <p><small>{{ recentPost.timestamp | date }}</small></p>
</div>

注意：使用

angular-cli

创建组件或服务或自己手动创建组件/服务。