Firebase 异步错误：InvalidPipeArgument： '[object Object]' for pipe 'AsyncPipe'

Question

我正在使用angularfire从firebase获取类别列表。这是数据库的JSON导出。

{
"categories" : {
"bread" : {
"Name" : "Bread"
},
"fruits" : {
"Name" : "Fruits"
},
"seasonings" : {
"Name" : "Seasonings"
}
},
"users" : {
"8ji3HjnPD0es5K5rNj2jHpPWeEk1" : {
"email" : "[e-mail]",
"isAdmin" : true,
"name" : "Kartik Dolas"
}
},
"vegetables" : {
"Name" : "Vegetables"
}
}

服务.ts

import { AngularFireDatabase } from 'angularfire2/database';
...
constructor(private db:AngularFireDatabase) { }
getCategories(){
return this.db.list('/categories')  
}

组件.ts

export class PrductFormComponent implements OnInit {
categories$;
constructor(categServ:CategoryService) {
this.categories$ = categServ.getCategories()
console.log(this.categories$);

}
ngOnInit(): void {
}
}

component.html

<div class="form-group">
<label for="category">Category</label>
<select id="category" class="form-control">
<option value=""></option>
<option *ngFor="let c of categories$ | async" [value]="c.$key">
{{ c.name }}
</option>
</select>
</div>

我使用的是firebase版本7.24和angularfire2版本5.4.2。我希望我的输出是面包、水果、调味料的下拉列表，但我得到了一个错误：InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

Answer 1

这应该可以工作
component.html

<div class="form-group">
<label for="category">Category</label>
<select id="category" class="form-control">
<option value=""></option>
<option *ngFor="let c of categories$ |async" value="c.$key">
{{ c.Name }}
</option>
</select>
</div>

服务.ts

getCategories(): Observable<any>{
// add valueChanges() here
return this.db.list('categories').valueChanges();  
}

如果$key不适用于任何版本，请改用snapshotchanges
服务.ts

getCategories() {
return this.db
.list('/categories', (ref) => ref.orderByChild('name'))
.snapshotChanges()
.pipe(
map((actions) => {
return actions.map((action) => ({
key: action.key,
val: action.payload.val(),
}));
}));
}

component.html

<option *ngFor="let c of categories$ | async" [value]="c.key">
{{ c.val.name }}
</option>

Answer 2

我不太了解FireBase，但这个错误很可能意味着您给async管道的是object而不是observable。

将服务更改为：

import { AngularFireDatabase } from 'angularfire2/database';
...
constructor(private db:AngularFireDatabase) { }
// make getCategories method return an Observable of type any
// ensure there are no errors and indeed that this.db.list
// returns an observable
getCategories(): Observable<any>{
return this.db.list('/categories');  
}

快速查看这里的文档，您似乎需要.valueChanges()。

getCategories(): Observable<any>{
// add valueChanges() here
return this.db.list('/categories').valueChanges();  
}

编辑

import { of } from 'rxjs';
....
getCategories(): Observable<any> {
return of([{ id: 1, name: 'Jack' }, { id: 2, name: 'John' }]);
}

更改getCategories以返回类似的静态可观察结果，并查看async管道是否工作。如果是，则意味着使用旧的实现(返回this.db.list('/categies'(.valueChanges((；(，你没有回来，也没有被观察到，但对我来说，我认为valueChanges应该是一个可观察的。即使你转到我提供的链接，他们也会向你展示如何使用async管道

以下是链接：https://github.com/angular/angularfire/blob/master/docs/rtdb/lists.md

Answer 3

对我来说，循环似乎是在对象/字典上迭代，而不是在数组上迭代。如果是这种情况，那么不要忘记您的KeyValuePipe:

<option *ngFor="let kvp of categories$ | async | keyvalue" [value]="kvp.key">
{{ kvp.value.Name }}
</option>