我创建了一个简单的测试项目来学习一些基本的Angular ，如CRUD函数，ngFor和HttpClient方法（get，post）。
现在我已经创建了一个带有API键的firebase数据库，并添加了一些数据，这样我就可以尝试获取数据并使用ngFor在html表中显示。
我遇到了一个问题，我相信我的代码是正确的，但我不能在屏幕上显示任何数据，chrome没有抛出任何错误，我的编译器也没有。我用http从数据库中获取数据。get方法，然后使用内置到angular中的管道METHOD将对象数据Map到对象数组，一旦这样做，我就能够订阅数据并尝试在我的html表中使用它，但后面没有显示任何内容。我已经附上了我的代码文件下面，如果有人可以看看，并帮助我，这将是伟大的。
对象类CODE

export class Courses {
  name: string;
  roomNumber: string;
  teacher: string;
  id?: string;
}

课程组件代码（课程。component.ts）

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;
  

  constructor(service: CoursesService) {
    this.courses = service.fetchCourses();
  }

  ngOnInit(): void{
     
}

}

课程服务代码

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

@Injectable({
  providedIn: 'root'
})
export class CoursesService {
  listofCourses: Courses[] = [];
  constructor(private httpClient: HttpClient) { }

  fetchCourses() {
    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;
      }))
      .subscribe(courses => {
        console.log(courses)
        this.listofCourses = courses;
      });
  }
}

课程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 listofCourses">
      <td>{{course.name}}</td>
      <td>{{course.roomNumber}}</td>
      <td>{{course.teacher}}</td>
    </tr> 
</table>

应用程序模块代码

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { CoursesService } from './courses.service';
import { CoursesComponent } from './courses/courses.component';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    CoursesComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
  providers: [
   CoursesService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }