使用带有 angular2 的异步管道不起作用答案

【问题标题】：using async pipe with angular2 not working使用带有 angular2 的异步管道不起作用
【发布时间】：2016-04-14 02:17:18
【问题描述】：

每当我使用异步管道时，我都会收到控制台错误。

   <component *ngFor="#c of columns | async" [column]="c"></component>

我收到此控制台错误：

异常：[columns | 中管道“AsyncPipe”的参数“[object Object]”无效项目中的异步@1:51] browser_adapter.js:76 例外：[columns | 中管道“AsyncPipe”的参数“[object Object]”无效Projects@1:51 中的异步]

有什么遗漏吗？

【问题讨论】：

可以加column的代码吗？

标签： angular angular2-directives

【解决方案1】：

columns 属性必须是 observable 或 Promise（不是数组或其他东西。请参阅 Angular2 源代码中的这一行（AsyncPipe 类）：https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/async_pipe.ts#L109。

以 HTTP 调用为例，您需要直接使用返回的 observable 设置 columns 属性。 async 将负责处理它，即调用它的subscribe 方法，将其处理掉。这是一个示例：

this.columns = 
   this.http.get('https://angular2.apispark.net/v1/companies/', {
     headers: headers
   }).map(res => res.json());

不要从您自己管理的订阅方法中设置 `columns 属性：

this.http.get('https://angular2.apispark.net/v1/companies/', {
  headers: headers
})
.map(res => res.json())
.subscribe(data => this.columns = data);

希望对你有帮助蒂埃里

【讨论】：