Есть ли способ отобразить одни и те же данные о базе данных на нескольких ионных страницах? - PullRequest
Новая
       18

Есть ли способ отобразить одни и те же данные о базе данных на нескольких ионных страницах?

0 голосов
/ 20 апреля 2019

Я использую Google Firebase для создания базы данных книг. На одной странице у меня есть кнопка «Создать», которая добавляет книгу в базу данных. После добавления книги появляется список, в котором отображается название всех книг.

Я хочу, чтобы эта информация также отображалась на другом странице, отдельно от списка добавления книг. Однако, когда я пытаюсь это сделать, я не могу заставить его работать.

Это домашняя страница с информацией. (https://i.imgur.com/7aK5AQP.png)

Это ActivityPage, которая должна отображать ту же информацию, что и HomePage, но в виде текстового списка (по какой-то причине она пуста). (https://i.imgur.com/cmSX0Rx.png)

Если я добавлю книгу ... список тестов на ActivityPage теперь будет работать правильно и покажет список. (https://i.imgur.com/EcPxp1X.png)

Вот что у меня сейчас: HOMEPAGE.ts: 

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Book, BookService } from 'src/app/services/book.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {

  private books: Observable<Book[]>;

  constructor(private bookService: BookService) { }

  ngOnInit() {
    this.books = this.bookService.getBooks();
  }
}

ДОБАВИТЬ КНИГУ. СТРАНИЦЫ: 

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Book, BookService } from 'src/app/services/book.service';

@Component({
  selector: 'app-activity',
  templateUrl: './activity.page.html',
  styleUrls: ['./activity.page.scss'],
})
export class ActivityPage implements OnInit {

  private books: Observable<Book[]>;

  constructor(private bookService: BookService) { }

  ngOnInit() {
    this.books = this.bookService.getBooks();
  }
}

book.service.ts 

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, DocumentReference } from '@angular/fire/firestore';
import { map, take } from 'rxjs/operators';
import { Observable } from 'rxjs';

export interface Book {
  id?: string;
  name: string;
  notes: string;
  image: string;
}

@Injectable({
  providedIn: 'root'
})
export class BookService {
  private books: Observable<Book[]>;
  private bookCollection: AngularFirestoreCollection<Book>;

  constructor(private afs: AngularFirestore) {
    this.bookCollection = this.afs.collection<Book>('books');
    this.books = this.bookCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        });
      })
    );
  }

  // This function returns a data array of book items
  getBooks(): Observable<Book[]> {
    return this.books;
  }

  // This function gets a id passed to it to retrieve the book id-details (valueChanges)
  getBook(id: string): Observable<Book> {
    return this.bookCollection.doc<Book>(id).valueChanges().pipe(
      take(1),
      map(book => {
        book.id = id;
        return book
      })
    );
  }

// This function is used to add a NEW book to the Database
  addBook(book: Book): Promise<DocumentReference> {
    return this.bookCollection.add(book);
  }

 // Uses the book object that contains some level of data and then uses the id
 // to know which book document id is getting updated in the Database
  updateBook(book: Book): Promise<void> {
    return this.bookCollection.doc(book.id).update({name: book.name, notes: book.notes, image: book.image });
  }

  // This function will pass in a document id and then use the book object.delete command to
  // remove it from the Database.
  deleteBook(id: string): Promise<void> {
    return this.bookCollection.doc(id).delete();
  }
}
...