I am trying to get data from a web service (JSON result) and display it in Angular 2 component with *ngFor. Here are my details:
{
"Columns": [
{"Label": "CodeProduct"},
{"Label": "productfamily_ID"},
{"Label": "description"}
]
}
And here is my Angular component:
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);
}
}
And my template:
<h3>Hello StackOverFlow</h3>
<ul>
<li *ngFor="#column of columns">{{column.Label}}</li>
</ul>
I see that a heading appears, but not a list of my columns (even if I try to use a static row, like "Test" inside <li>). If I populate my array with static values in the constructor, I will see how the array is displayed. In debuger, I see that the data is being retrieved correctly, but on this line:
.subscribe((columnRemote: Array<Object>) => { this.columns = columnRemote});
a variable that is of type Subscriber, not of type AppComponent. This is normal? Did I do it wrong? I am working with Angular2 beta6 with ES5 TypeScript.
EDIT 1: Here is what debuger told me forres.json()
