Question

我正在使用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();
  }
}

ADD BOOK PAGE.ts：

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();
  }
}

有没有办法在多个离子页面上显示相同的Firebase数据？

0 个答案: