Angular项目中Firebase数据无法在表格显示的问题求助

问题根源分析 #

你的代码存在三个核心问题导致数据无法渲染：

1. 组件模板直接引用服务内变量，Angular模板无法正确识别服务变量的变更
2. 服务的fetchCourses方法直接在内部订阅HTTP请求，返回的是订阅对象而非数据流，组件无法获取有效数据
3. 在构造函数中调用异步请求不符合Angular生命周期最佳实践

修复方案 #

1. 修改CoursesService

移除服务内的listofCourses变量，让fetchCourses返回Observable，将订阅逻辑交给组件处理：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, Observable } from 'rxjs';
import { Courses } from './courses';

@Injectable({
  providedIn: 'root'
})
export class CoursesService {
  constructor(private httpClient: HttpClient) { }

  fetchCourses(): Observable<Courses[]> {
    return this.httpClient.get<{ [key: string]: Courses }>('https://testang-6c37f-default-rtdb.firebaseio.com/courses.json')
      .pipe(map((response) => {
        const courses = [];
        for (const key in response) {
          if (response.hasOwnProperty(key)) {
            courses.push({ ...response[key], id: key })
          }
        }
        return courses;
      }));
  }
}

2. 修改CoursesComponent

在组件内维护数据变量，在ngOnInit钩子中订阅服务的Observable：

import { Component, OnInit } from '@angular/core';
import { CoursesService } from '../courses.service';
import { Courses } from '../courses';

@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html'
})
export class CoursesComponent implements OnInit {
  courses: Courses[] = [];

  constructor(private service: CoursesService) { }

  ngOnInit(): void {
    this.service.fetchCourses().subscribe(courses => {
      this.courses = courses;
    });
  }
}

3. 修改组件HTML模板

将*ngFor的数据源改为组件自己的courses变量：

<h2>Course List</h2>
<table class="table table-bordered">
    <tr>
      <th>Name</th>
      <th>Room Number</th>
      <th>Teacher</th>
    </tr>
    <tr *ngFor="let course of courses">
      <td>{{course.name}}</td>
      <td>{{course.roomNumber}}</td>
      <td>{{course.teacher}}</td>
    </tr> 
</table>

进阶优化（推荐） #

使用Angular的async管道自动处理订阅与取消订阅，避免内存泄漏：

修改组件：

import { Component, OnInit } from '@angular/core';
import { CoursesService } from '../courses.service';
import { Courses } from '../courses';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html'
})
export class CoursesComponent implements OnInit {
  courses$: Observable<Courses[]>;

  constructor(private service: CoursesService) { }

  ngOnInit(): void {
    this.courses$ = this.service.fetchCourses();
  }
}

修改HTML模板：

<h2>Course List</h2>
<table class="table table-bordered">
    <tr>
      <th>Name</th>
      <th>Room Number</th>
      <th>Teacher</th>
    </tr>
    <tr *ngFor="let course of courses$ | async">
      <td>{{course.name}}</td>
      <td>{{course.roomNumber}}</td>
      <td>{{course.teacher}}</td>
    </tr> 
</table>

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