如何使用 Cloud Firestore 在 ionic 4 应用程序中获取数据

Question

我正在学习一个教程，其中一个人展示了如何使用新闻 API 使用 ionic 4 构建新闻应用程序。 我还想创建一个新闻应用程序，显示来自特定主题的不同来源的汇总新闻，但问题是我正在考虑为此目的使用 Firebase 云 Firestore 而不是使用新闻 API，但我不知道如何从 firestore 集合中获取数据。 您可以查看以下代码以供参考。

新闻.page.ts

 import { Component, OnInit } from '@angular/core'; import { NewsService } from '../news.service'; import { Router } from '@angular/router'; @Component({ selector: 'app-news', templateUrl: './news.page.html', styleUrls: ['./news.page.scss'] }) export class NewsPage implements OnInit { data: any; page = 1; constructor(private newsService: NewsService, private router: Router) {} ngOnInit() { this.newsService .getData(`top-headlines?country=us&category=business&pageSize=5&page=${this.page}`) .subscribe(data => { console.log(data); this.data = data; }); } onGoToNewsSinglePage(article) { this.newsService.currentArticle = article; this.router.navigate(['/news-single']); } }

新闻服务.ts

 import { Injectable } from '@angular/core'; import { environment } from '../environments/environment'; import { HttpClient } from '@angular/common/http'; const API_URL = environment.apiUrl; const API_KEY = environment.apiKey; @Injectable({ providedIn: 'root' }) export class NewsService { currentArticle: any; constructor(private http: HttpClient) { } getData(url) { return this.http.get(`${API_URL}/${url}&apiKey=${API_KEY}`); } }

新闻.page.html

 <ion-header> <ion-toolbar> <ion-title>News</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-card *ngFor="let article of data?.articles" (click)="onGoToNewsSinglePage(article)"> <!-- <ion-img [src]="article.urlToImage"></ion-img> --> <ion-card-content> <ion-card-title>{{article.title}}</ion-card-title> <p>{{article.description}}</p> </ion-card-content> </ion-card> </ion-content>

我已经在我的项目中安装了 angularfire 2 插件，导入了 app.module.ts 中的所有文件，并为所有 Firebase 详细信息准备了一个配置文件。 我只想知道如何从 Firebase 集合中获取数据并将其绑定到 html 代码。

Answer 1

而不是调用您的服务this.newsService.getData(...)您将不得不使用来自angularfire2/firestore服务 public AngularFirestore 。 下面是一个例子：

导入服务并将其注入到您的组件news.page.ts ：

import {AngularFirestore} from 'angularfire2/firestore';
...
data: any;
constructor ( public db: AngularFirestore ) {
  }
...

要检索单个帖子，请创建函数

getPostEntry ( postTitle: string ): Observable<any> {
    return this.db.collection<any> ( "posts" , ref => ref.where ( 'title' , '==' , postTitle ) ).valueChanges ();
  }

这将搜索postTitle集合中名为"posts"所有条目，属性title是您的postTitle 。

同样检索所有帖子

getAllPosts (): Observable<any> {
    return this.db.collection<any>( "post" ).valueChanges ();
  }

然后调用函数并使用可观察对象。 例如，您可以在 ngOnInit 中执行此操作：

ngOnInit() {
            this.getAllPosts().subscribe((data)=>{
                this.data = data;
                console.log(data);
            });
        }

现在你的数据在你的变量data ，你只需要像往常一样在你的 html 中绘制它。 请记住，它可能是一个包含您所有帖子的数组（如果有的话）。

这是我从你的课上编辑的代码的要点：

https://gist.github.com/HugoJBello/73fb3c5c0964f29934a2d8021efb128d

编辑

重命名了 firebase 集合并添加了对 observable 的订阅