如何在AngularFire2 v5的Object中正确使用snapshotChanges()并渲染？

Hey there! Since you’re already familiar with the basics of AngularFire2’s list vs object distinctions and the difference between valueChanges() and snapshotChanges(), let’s dive straight into implementing snapshotChanges() for your Firebase Realtime Database object and getting it to render properly.

Step 1: Fetch the Object with snapshotChanges() in Your Service #

First, create a service method to retrieve a single course object. Unlike list operations, object snapshotChanges() emits a single action object that includes both the Firebase key and the raw data payload. We’ll use RxJS map() to transform this into a more usable format.

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class CourseService {
  constructor(private db: AngularFireDatabase) {}

  // Get a single course by its Firebase key (e.g., "ONE", "TWO")
  getCourse(courseKey: string): Observable<any> {
    const courseRef: AngularFireObject<any> = this.db.object(`courses/${courseKey}`);
    
    return courseRef.snapshotChanges().pipe(
      map(action => {
        const key = action.key;
        const payload = action.payload.val();
        // Combine key and payload into one object for easy template access
        return { key, ...payload };
      })
    );
  }
}

This transformation ensures your component receives both the course data and its Firebase key in a single, structured object.

Step 2: Subscribe to the Observable in Your Component #

In your component, inject the service and fetch the course data. Using the $ suffix is a common convention to mark Observables, making your code more readable.

import { Component, OnInit } from '@angular/core';
import { CourseService } from './course.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-course-detail',
  templateUrl: './course-detail.component.html'
})
export class CourseDetailComponent implements OnInit {
  course$: Observable<any>;

  constructor(private courseService: CourseService) {}

  ngOnInit() {
    // Fetch the "ONE" course as an example
    this.course$ = this.courseService.getCourse('ONE');
  }
}

Step 3: Render the Data in Your Template #

Use Angular’s async pipe to handle subscription and unsubscription automatically (preventing memory leaks). The *ngIf ensures the template only renders once the data is available.

<div *ngIf="course$ | async as course">
  <h2>{{ course.COURSE }}</h2>
  <p>Course Code: {{ course.COURSE_CODE }}</p>
  <p>AU Credits: {{ course.AU }}</p>
  <p>Firebase Key: {{ course.key }}</p> <!-- Access the key if needed -->
</div>

Key Notes for Object snapshotChanges() #

• Unlike list snapshotChanges(), which emits an array of actions, object snapshotChanges() emits one action object every time the data updates.
• action.payload.val() returns the raw course data from Firebase, while action.key gives you the object’s unique Firebase key.
• If you don’t need the key, valueChanges() is simpler—but including the key here is useful if you plan to update/delete the course later.

Bonus: Update the Course Using the Key #

If you need to modify the course data later, here’s how you can use the key in your service:

// In CourseService
updateCourse(courseKey: string, updates: any): Promise<void> {
  return this.db.object(`courses/${courseKey}`).update(updates);
}

// In your component
updateCourseCredits(course: any) {
  this.courseService.updateCourse(course.key, { AU: course.AU + 1 });
}

That’s all you need to correctly use snapshotChanges() with an AngularFireObject and render your course data smoothly. Let me know if you hit any specific roadblocks!

内容的提问来源于stack exchange，提问作者xcode