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

Question

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

{
  "categories" : {
    "bread" : {
      "Name" : "Bread"
    },
    "fruits" : {
      "Name" : "Fruits"
    },
    "seasonings" : {
      "Name" : "Seasonings"
    }
  },
  "users" : {
    "8ji3HjnPD0es5K5rNj2jHpPWeEk1" : {
      "email" : "abc@gmail.com",
      "isAdmin" : true,
      "name" : "Kartik Dolas"
    }
  },
  "vegetables" : {
    "Name" : "Vegetables"
  }
}

service.ts

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

component.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 版。 我希望我的输出是 Bread,Fruits,Seasonings 的下拉菜单，但出现错误：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>

service.ts

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

如果 $key 不适用于任何版本，请改用 snapshotchanges。
service.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');  
      }

快速查看文档here，看来您需要.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('/categories').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>