Firebase async error : 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 版。我希望我的输出是面包、水果、调味料的下拉列表，但出现错误：InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

Answer 1

我不太了解 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 更改为 return 静态可观察对象，然后查看 async 管道是否正常工作。如果是这样，这意味着您的旧实现（return this.db.list('/categories').valueChanges();），您不是 returning 和可观察的，但对我来说我认为 valueChanges 应该是可观察的。即使您转到我提供的 link，他们也会向您展示如何使用 async 管道。

这里又是link：https://github.com/angular/angularfire/blob/master/docs/rtdb/lists.md

Answer 2

对我来说，您的循环似乎是在遍历 object/dictionary 而不是数组。如果是这种情况，请不要忘记您的 KeyValuePipe:

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

Answer 3

这应该有效。
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>

Firebase async error : InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

Firebase async error : InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

asynchronous

firebase

angularfire2

angular