Question

简而言之，我要做的是将注释文档从Firestore加载到组件中。该注释具有称为链接的属性，该属性包含一组Firestore ID。加载便笺后，我想使用这些ID来获取每个相应的便笺，因此可以在主便笺下方显示其便笺名称。我已经能够加载主要笔记，但是在获取主要笔记后无法弄清楚如何加载文档。为此有一个好的RXJS解决方案吗？或者，如果我对数据建模错误，并且有一种更简单的方法可以做到这一点，请告诉我。

// note.model.ts
import { AngularFirestoreDocument, DocumentReference } from '@angular/fire/firestore';

export interface Note {
  id: string;
  name: string;
  note: string;
  links: string[]; //contains the ids of other documents
}

// view-note.component.ts
import { Component, OnInit } from '@angular/core';
import { NotesService } from '../notes.service';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { Note } from '../notes.model';
import { switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-view-note',
  templateUrl: './view-note.component.html',
  styleUrls: ['./view-note.component.scss']
})
export class ViewNoteComponent implements OnInit {
  note: Note;
  note$: Observable<any>;
  linkedNotes$: Observable<Note[]>;
  links: Observable<Note>[] = [];

  constructor(
    private notesService: NotesService,
    private ar: ActivatedRoute) {
    }

  ngOnInit() {
    this.note$ = this.ar.params.pipe(
      switchMap(params => this.notesService.loadNote(params.id)));
  }
}

//notes.service.ts
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Note } from './notes.model';
import { MatSnackBar } from '@angular/material';

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

  constructor(
    private db: AngularFirestore,
    private snackbar: MatSnackBar,
  ) { }


  // Load the notes collection
  loadNotes(): Observable<Note[]> {
    return this.db.collection<Note>('notes', ref => ref.orderBy('name', 'asc'))
      .snapshotChanges().pipe(
        map(actions => actions.map(a => {
          return { id: a.payload.doc.id, ...a.payload.doc.data() } as Note;
        })));
  }

  // Load note document
  loadNoteDocument(noteId: string): AngularFirestoreDocument<Note> {
    return this.db.doc<Note>(`notes/${noteId}`);
  }

  // Load note by id
  loadNote(noteId: string): Observable<Note> {
    return this.db.doc<Note>(`notes/${noteId}`)
      .snapshotChanges().pipe(
        map(note => {
          return { id: note.payload.id, ...note.payload.data() } as Note;
        }));
  }

  // Adds a note
  addNote(note: Note): void {
    this.db.collection<Note>(`notes`).add(note);
  }

  // Updates a note
  updateNote(noteId: string, propertiesToUpdate: object): void {
    this.db.doc<Note>(`notes/${noteId}`)
      .update(propertiesToUpdate);
  }

  // Deletes a note
  deleteNote(noteId: string): void {
      this.db.doc<Note>(`notes/${noteId}`).delete();
  }

  // Launches snackbar
  launchSnackbar(error) {
    this.snackbar.open(error, 'Undo', {
      duration: 3000
    });
  }


}

检索我刚刚获取的Firebase文档中ID引用的Firebase文档的集合

0 个答案: