javascript - 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 属性的对象，是所需的数组。

我不能做这样的事情:

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

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

并且它确实适用于|async。

问题:

看看我的第一个代码，如何在解析对象而不是数组的同时使用async pipe？

{data: [0, 1, 2]} 

Answer 1

给你另一个选项来使用异步管道(你提到你想要的)，意味着你需要有一个 Observable 来处理......服务返回 Observable:

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

然后在组件中分配 Observable:

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

然后你可以像这样在 View 中使用异步管道:

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

Demo