使用 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
当我尝试执行此操作时,在 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.
db.list('/courses').subscribe(res => this.courses$ = res);
承诺是当您等待来自异步任务的 response/answer 时,当您“.subscribe()”到它时,您告诉您的代码“一旦完成 运行此任务和响应已发送,执行此代码”。 "res" => 用于响应呼叫。你也可以做
.subscribe(res => this.courses$ = res, err => console.log(err) );
这也会显示错误
当我尝试执行此操作时,在 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.
db.list('/courses').subscribe(res => this.courses$ = res);
承诺是当您等待来自异步任务的 response/answer 时,当您“.subscribe()”到它时,您告诉您的代码“一旦完成 运行此任务和响应已发送,执行此代码”。 "res" => 用于响应呼叫。你也可以做
.subscribe(res => this.courses$ = res, err => console.log(err) );
这也会显示错误