2016-02-06 21 views
8

ho dont'know come ottenere i dati da JSON stampati nel mio modelloangular2 JSON stampa dal servizio

se io uso nel template: modello: people: {{people}} o un modello: people: {{articles}}
ottenere sempre nel browser:

persone: [object Object]

se io uso nel template: template: people: {{people.totalrecords}} o un modello: people: {{articlestotalrecords}}

a ottenere valore vuoto: persone:

import {bootstrap} from 'angular2/platform/browser'; 
import {Component, enableProdMode, Injectable, OnInit} from 'angular2/core'; 
import {Http, HTTP_PROVIDERS, URLSearchParams} from 'angular2/http'; 
import 'rxjs/add/operator/map'; 
import {enableProdMode} from '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> 

risposta

9

Credo che bisogna

{{people?.totalrecords}} 

per farlo funzionare.

È possibile recuperare i dati prima che Angular esegua il rendering della vista, ma la risposta probabilmente arriverà in seguito.

Con ?. angolare non valuta .totalrecords mentre people è nullo.

+0

grazie! quindi devo usare sempre per sicurezza? nei miei modelli? che dire quando non ho un valore, posso usare {{? totalrecords}}, grazie! – stackdave

+0

Quando 'persone' è' indefinito' o 'null'' people.totalrecords' genera perché 'null' non ha una proprietà' totalrecords'. Hai solo bisogno di '? .' quando la parte che precede può diventare' undefined' o 'null'. Se assegni un valore iniziale a 'people' (ad esempio nel costruttore) non hai bisogno di'.? '. Altrimenti 'persone' non è definito fino a quando non arriva il valore dal server. 'people? .totalrecords' è una forma breve di' persone? people.totalrecords: null' –

26

Se volete vedere JSON, non vi resta che fare questo:

people: {{people | json}} 
Problemi correlati