Как использовать облачный firestore для получения данных в приложении ionic 4

Question

Я следовал учебному пособию, где парень показал, как создать новостное приложение с ionic 4, используя API новостей.Я также хочу создать новостное приложение, которое показывает сводные новости из разных источников по определенной теме, но проблема в том, что я думаю об использовании облачного пожарного хранилища Firebase для этой цели вместо использования API новостей, и я не могу понять, какчтобы получить данные из коллекции пожарного магазина.Вы можете посмотреть следующий код для справки.

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

news.service.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}`);
    }
  }

news.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(...) вам придется использовать публичную службу firebase AngularFirestore с angularfire2/firestore. Вот пример:

Импорт службы и добавление ее в ваш компонент 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 ();
  }

Это будет искать все записи в вашей коллекции пожарного магазина под названием "posts" с атрибутом title, являющимся вашим postTitle.

Simillarly, чтобы получить все сообщения

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

EDIT

переименован в коллекцию Firebase и добавлена ​​подписка на наблюдаемые