首页 文章

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

提问于
浏览 次
0

我只需要获得单项，所以我在模板中使用了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

angular asynchronous observable

2 回答

  • 6

    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 调用返回 any ，编译器仍然认为所有内容都很好，即使它确实没有 .

    回复于
  • 1

    异步管道用于处理 Promise 和 Observable 对象，item不是可观察的，但是当您在 subscribe 回调中分配 item 时，响应中包含的数据 .

    如果你这样做会有效：

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

相关问题