Angular - Http在没有异步管道的情况下工作

Question

我只需要获得单项,所以我在模板中使用了ngIf而不是ngFor.

模板:

<div *ngIf="item | async">
    Id {{ item.id }}
    Number {{ item.number }}
</div>

服务:

get(id: number): Observable<Response> {
return this.http
  .get(`myApi/id`)
  .map(response => response.json());
}

零件:

export class DetailItemPage {
 private item: Observable<Object>;

 ngOnInit(){
  this.getItem(6994);
 }

getItem(id){
  this.itemProvider.get(id).subscribe(
     res => {
       this.item = res;
       console.log(this.item);
     });
  }

} 

在控制台日志中,我正确地看到了对象.

有了这个例子,我得到错误:

InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

但是,如果我删除异步管道,WORKS.我可以看到项目ID和号码.为什么？我做错了什么？

PS:我使用了Angular 4.1.3

Answer 1

该async管道需要一个Promise或Observable.在您的情况下,您添加正常Object.这不是管道想要的,因此它会引发错误.您不必在此处使用异步管道.

但是你可以像这样使用它:

export class DetailItemPage {
   private item: Observable<Object>;

   ngOnInit(){
     this.getItem(6994);
   }

   getItem(id){
      this.item = this.itemProvider.get(id);
   }
} 

在这种情况下,item它真的是一个Observable,你的管道将非常高兴.只要知道使用Observable<Object>字段值的类型定义并不能保证你实际上有一个Observable<Object>在那里.因为http调用以a返回any,编译器仍然相信所有内容都很好,即使它确实没有.