Angular2-如何使用非阵列结果的异步管道？

Question

在这个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>

但是有一个问题。

文章不是数组。它是一个具有dataprop的对象，该属性是必需的数组。

我不能这样做：

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

我创建了另一个plunker，它只返回一个数组：

而且它可以与| async一起工作。

问题:

看看我的第一个代码，我如何使用异步管道，同时仍然解析一个对象而不是一个数组？

{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>

演示