I am trying to display data from firebase in angular, but I can't seem to get the list objects from loading and it always leads to a blank with this error ERROR Error: InvalidPipeArgument: '' for pipe 'AsyncPipe'

I've even followed the fire module guide, but it doesn't seem to work.

Here is my component code

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);
     });
  }

}

and my template code

<p>querydata works!</p>

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

Any help would be appreciated Thanks