Angular 2 DataService in TypeScript for ASP.NET 5 not displaying data -
this displays hello world app.component.ts bootstrapping correctly. either no data returned dataservice or can't displayed. there no compiler errors. there popup window in typescript alert() in javascript check see if data being returned dataservice?
app.component.ts
import { component } 'angular2/core'; import { dataservice } './data.service'; @component({ selector: 'app', template: `<h1>hello world</h1> <li *ngfor="#customer of customers"> <span>{{customer.firstname}}</span> </li> ` }) export class appcomponent { public dataservice: dataservice; customers: any[]; constructor() { } ngoninit() { this.dataservice.getcustomers() .subscribe((customers: any[]) => { this.customers = customers; }); } }
data.service.ts
import { injectable } 'angular2/core'; import { http, response } 'angular2/http'; import 'rxjs/add/operator/map'; @injectable() export class dataservice { public http: http constructor() { } getcustomers() { return this.http.get('customers.json') .map((res: response) => res.json()); } }
you need register dataservice 1 of providers component.
import { component } 'angular2/core'; import { dataservice } './data.service'; @component({ selector: 'app', providers: [dataservice], template: `<h1>hello world</h1> <li *ngfor="#customer of customers"> <span>{{customer.firstname}}</span> </li> ` }) export class appcomponent { customers: any[]; constructor(public dataservice: dataservice) { } ngoninit() { this.dataservice.getcustomers() .subscribe((customers: any[]) => { this.customers = customers; }); } }
Comments
Post a Comment