CODEWITHSUNDEEP
angularhttptypescript
Christophe Gigax
Christophe Gigax

Reputation: 3470

Http get + NgFor

I'm trying to retrieve datas from a webservice (JSON result) and render it in a Angular 2 component with *ngFor. Here is my datas :

{
  "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 can see that the title appears, but not the list of my columns (even if I try with a static string, like 'Test' inside the <li>). If I fill my array with static values in the constructor, I can see the array displayed. In the debuger I can see that datas are correctly retrieved, but in this line :

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

the variable this is of type Subscriber and not of type AppComponent. Is that normal ? Do I've done it wrong ? I'm working with Angular2 beta6 with ES5 TypeScript.

EDIT 1 : Here is what debuger show me for res.json()

enter image description here

Upvotes: 4

Views: 2343

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71961

To be able to let angular know when to update data, add angular2-polyfills.js to your index.html, because this will include zone.js

(thanks @lucacox)

With the correct order of adding the libraries is:

es6-shim.min.js

system-polyfills.js

angular2-polyfills.js

system.src.js

Rx.js

angular2.dev.js

Be aware that the necessary libraries may change over time as angular2 is maturing. Always check the quickstart guide, when you update to a newer version of angular2.

Upvotes: 1

Related Questions