Angular Http-get+；NgFor

我试图从webservice（JSON结果）检索数据，并使用

*ngFor

将其呈现在Angular 2组件中。以下是我的数据：

{
  "Columns": [
    {"Label": "CodeProduct"},
    {"Label": "productfamily_ID"},
    {"Label": "description"}
  ]
}

这是我的角度分量：

import {Component, View} from 'angular2/core';
import {Http, Response}  from 'angular2/http';
import 'rxjs/add/operator/map';

@Component({
    selector: 'app',
    templateUrl: './app/app.html'
})
export class AppComponent
{
    columns: Array<Object> = [];

    constructor(private http: Http){}

    ngOnInit() {
        this.getProducts()
            .subscribe(
            (columnRemote: Array<Object>) => { this.columns = columnRemote});
    };

    private _url = 'api/data/product';

    getProducts() {
        return this.http.get(this._url)
            .map((res) => res.json().Columns);
    }
}

从'angular2/core'导入{Component，View}；
从'angular2/Http'导入{Http，Response}；
导入'rxjs/add/operator/map'；
@组成部分({
选择器：“应用程序”，
templateUrl:“./app/app.html”
})
导出类AppComponent
{
列：数组=[]；
构造函数（私有http:http）{}
恩戈尼尼特（）{
这是getProducts（）
.订阅(
（columnRemote:Array）=>{this.columns=columnRemote}）；
};
private _url='api/data/product'；
getProducts（）{
返回this.http.get（this.\uURL）
.map（（res）=>res.json（）.Columns）；
}
}

和我的模板：

<h3>Hello StackOverFlow</h3>

<ul>
    <li *ngFor="#column of columns">{{column.Label}}</li>
</ul>

Hello堆栈溢出

{{column.Label}

我可以看到标题出现，但看不到我的列列表（即使我尝试使用静态字符串，如

中的“Test”）。如果在构造函数中用静态值填充数组，则可以看到显示的数组。
在调试程序中，我可以看到数据已正确检索，但在这一行中：

.subscribe((columnRemote: Array<Object>) => { this.columns = columnRemote});

.subscribe（（columnRemote:Array）=>{this.columns=columnRemote}）；

此变量的类型为Subscriber，而不是AppComponent。这正常吗？我做错了吗？我正在与Angular2 beta6一起使用ES5打字脚本

EDIT1：以下是调试器为我展示的
res.json（）

要让angular2知道何时更新数据，请将
angular2 polyfills.js
添加到
index.html
，因为这将包括
zone.js

（谢谢@lucacox）

添加库的正确顺序是：

es6 shim.min.js

system polyfills.js

angular2 polyfills.js

system.src.js

Rx.js

angular2.dev.js

请注意，随着angular2的成熟，必要的库可能会随着时间的推移而变化。当您更新到angular2的较新版本时，请务必查看指南。
从上面的代码中，我认为您获得了一个对象，但您将其视为数组。请尝试
…

我将其视为数组，因为我在.map函数中返回Columns数组：

.map（（res）=>res json（）.栏目）

得到了问题，兄弟..正在处理它您是否已将

angular2 polyfills.js

添加到您的

index.html

？

angular2 polyfills.js

包括

zone.js

，angular2 polyfills使用它来知道何时更新数据！还有一个问题：为什么

system polyfills.js

和

es6 shim.min.js

？这些是Internet Explorer polyfills。IE要求polyfills运行依赖ES2015承诺和动态模块加载的应用程序。其中

es6垫片

提供ES2015承诺，而

系统填充

动态模块加载