Estoy tratando de mostrar datos de firebase en angular, pero parece que no puedo hacer que los objetos de la lista se carguen y siempre deja un espacio en blanco con este error ERROR Error: InvalidPipeArgument: '' for pipe 'AsyncPipe'

Incluso he seguido la guía del módulo de incendios, pero no parece funcionar.

Aquí está mi código de componente

 import {AngularFireDatabase,AngularFireList} from '@angular/fire/compat/database'; import { Observable } from 'rxjs'; @Component({ selector: 'querydata', templateUrl: './querydata.component.html', styleUrls: ['./querydata.component.css'] }) export class QuerydataComponent implements OnInit { courses:any; constructor(private db :AngularFireDatabase) { } ngOnInit(): void { this.db.list('courses').valueChanges().subscribe(courses =>{ this.courses=courses; console.log(this.courses); }); } }

y mi código de plantilla

 <p>querydata works!</p> <ul *ngIf="courses"> <li *ngFor="let course of courses | async"> {{ course.value }} </li> </ul>

Cualquier ayuda será apreciada, gracias