使用 Angular 10 在 firebase 中添加对象时出现错误 "AngularFireList<any> is not assignable to Promise<any[]>...."

Question

当我尝试执行此操作时，在 Firebase 中完美地创建了对象，但是 .html 文件未显示输出并在行（下方）处显示错误。我还在下面添加了错误消息。请帮助我，我已经坚持了 2 天了。

<li *ngFor="let course of courses$ | async">

app.component.ts

import { Component, OnDestroy } from '@angular/core';
import { AngularFireDatabase, AngularFireList, AngularFireObject } from '@angular/fire/database'
import { Observable, Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy{
  
  courses$!: AngularFireList<any>;
 
  constructor(db: AngularFireDatabase){
    this.courses$ = db.list('/courses');
    console.log(this.courses$); 
  }
  addCourse(courseValue: HTMLInputElement){
    this.courses$.push({
      name: courseValue.value
    });
    console.log(courseValue.value);
    courseValue.value= '';
  }
  ngOnDestroy(){
  }
}

app.component.html

<h2>PUSH</h2>
<input type="text" (keyup.enter)="addCourse(course)" #course>
<ul>
  <li *ngFor="let course of courses$ | async">
    {{ course }}
  </li>
</ul>

错误信息：

Error: src/app/app.component.html:18:29 - error TS2769: No overload matches this call.
  Overload 1 of 3, '(obj: Subscribable<any[] | Iterable<any> | (Iterable<any> & any[]) | (any[] & Iterable<any>) | undefined> | Promise<any[] | Iterable<any> | (Iterable<...> & any[]) | (any[] & Iterable<...>) | undefined>): any[] | ... 4 more ... | undefined', gave the following error.
    Argument of type 'AngularFireList<any>' is not assignable to parameter of type 'Subscribable<any[] | Iterable<any> | (Iterable<any> & any[]) | (any[] & Iterable<any>) | undefined> | Promise<any[] | Iterable<any> | (Iterable<...> & any[]) | (any[] & Iterable<...>) | undefined>'.
      Type 'AngularFireList<any>' is missing the following properties from type 'Promise<any[] | Iterable<any> | (Iterable<any> & any[]) | (any[] & Iterable<any>) | undefined>': then, catch, [Symbol.toStringTag], finally
  Overload 2 of 3, '(obj: null | undefined): null', gave the following error.
    Argument of type 'AngularFireList<any>' is not assignable to parameter of type 'null | undefined'.
      Type 'AngularFireList<any>' is not assignable to type 'null'.
  Overload 3 of 3, '(obj: Subscribable<any[] | Iterable<any> | (Iterable<any> & any[]) | (any[] & Iterable<any>) | undefined> | Promise<any[] | Iterable<any> | (Iterable<...> & any[]) | (any[] & Iterable<...>) | undefined> | null | undefined): any[] | ... 4 more ... | undefined', gave the following error.
    Argument of type 'AngularFireList<any>' is not assignable to parameter of type 'Subscribable<any[] | Iterable<any> | (Iterable<any> & any[]) | (any[] & Iterable<any>) | undefined> | Promise<any[] | Iterable<any> | (Iterable<...> & any[]) | (any[] & Iterable<...>) | undefined> | null | undefined'.
      Type 'AngularFireList<any>' is not assignable to type 'Promise<any[] | Iterable<any> | (Iterable<any> & any[]) | (any[] & Iterable<any>) | undefined>'.

18   <li *ngFor="let course of courses$ | async">
                               ~~~~~~~~

  src/app/app.component.ts:7:16
    7   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

Answer 1

  db.list('/courses').subscribe(res => this.courses$ = res);

承诺是当您等待来自异步任务的 response/answer 时，当您“.subscribe()”到它时，您告诉您的代码“一旦完成运行此任务和响应已发送，执行此代码”。 "res" => 用于响应呼叫。你也可以做

.subscribe(res => this.courses$ = res, err => console.log(err) );

这也会显示错误

使用 Angular 10 在 firebase 中添加对象时出现错误 "AngularFireList<any> is not assignable to Promise<any[]>...."

Getting error "AngularFireList<any> is not assignable to Promise<any[]>...." during adding object in firebase using Angular10

angular

typescript

firebase

firebase-realtime-database

angularfire