typescript - angular2 print json from service -
i dont'know how data json printed in template
if use in template: template: people: {{people}} or template: people: {{articles}}
in browser:
people: [object object]
if use in template: template: people: {{people.totalrecords}} or template: people: {{articlestotalrecords}}
in blank value: people:
import {bootstrap} 'angular2/platform/browser'; import {component, enableprodmode, injectable, oninit} 'angular2/core'; import {http, http_providers, urlsearchparams} 'angular2/http'; import 'rxjs/add/operator/map'; import {enableprodmode} 'angular2/core'; @injectable() class articleapi { constructor(private http: http) {} getdata: string; seacharticle(query) { const endpoint = 'http://xdemocrm.com/webservicecrm.php'; const searchparams = new urlsearchparams() searchparams.set('object', 'account'); searchparams.set('action', 'list'); return this.http .get(endpoint, {search: searchparams}) .map(res => res.json()) } postexample(somedata) { return this.http .post('https://yourendpoint', json.stringify(somedata)) .map(res => res.json()); } } @component({ selector: 'app', template: `people: {{people}}`, providers: [http_providers, articleapi], }) class app implements oninit { public people; constructor(private articleapi: articleapi) { } public articles: array<any> = []; ngoninit() { this.articles = this.articleapi.seacharticle('obama') .subscribe (data => this.people = data) } } bootstrap(app) .catch(err => console.error(err)); <!doctype html> <html> <head> <title>angular2 http exmaple</title> <link rel="stylesheet" href="style.css"> <script src="https://code.angularjs.org/tools/system.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="config.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.1/rx.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.1/angular2.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.1/http.js"></script> <script> system.import('app') .catch(console.error.bind(console)); </script> </head> <body> <app>loading...</app> </body> </html>
i guess need
{{people?.totalrecords}} to make work.
you fetch data before angular renders view, response arrives afterwards.
with ?. angular doesn't evaluate .totalrecords while people null.
Comments
Post a Comment