Angular2 - 如何使用非数组结果的异步管道？

Question

在this Plunker我有这样的模板：

<span *ngFor="let a of Articles">{{a}}</span> 

这是组件类：

export class App 
{ 
    Articles: number[]; 
    constructor() 
    { 
     this.getData(); 
    } 
    simualteDb() 
    { 
     return new Promise((a, b) => 
     { 
      setTimeout(function() 
      { 
       a(
       { // notice , an object ,not an array 
        data: [0, 1, 2] 
       }); 
      }, 500) 
     }); 
    } 
    async getData() 
    { 
     this.Articles = (await this.simualteDb()).data; 
    } 
} 

这不工作，我也看到在输出012。但我想用async管道。

所以我想我的模板是：

<span *ngFor="let a of Articles |async ">{{a}}</span> 

但是有一个问题。

Articles不是数组。它是data prop的对象，其中是所需的数组。

我不能做这样的事情：

<span *ngFor="let a of Articles.data |async ">{{a}}</span> 

我已经创造了另一个plunker仅返回数组：

它必须和|async工作。

问：

注视着我的第一个代码，我如何使用async pipe，同时还解决了对象，而不是一个数组？

{data: [0, 1, 2]} 

Answer 1

给你其他的选项，使用异步管道（你提到你想要的），这意味着你需要有一个可观察与...服务工作返回可观察：

getArticles() { 
    return this.http.get('url') 
    .map(res => res.json()) 
} 

而在组件分配可观察到：

ngOnInit() { 
    this.Articles = this.service.getArticles() 
} 

然后你可以使用异步管道在你看来像这样：

<div *ngFor="let a of (Articles | async)?.data">{{a}}</div> 

Demo