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