2016-02-06 23 views
8

I dont'know jak uzyskać dane z JSON drukowane w moim szablonuangular2 druku json z serwisu

jeśli mogę użyć w szablonie: szablonu: people: {{people}} lub szablon: people: {{articles}}
zawsze dostać w przeglądarce:

osoby: [object Object]

jeśli mogę użyć w szablonie: szablon: people: {{people.totalrecords}} lub szablon: people: {{articlestotalrecords}}

Get wartość pustą: osób:

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> 

Odpowiedz

9

Chyba trzeba

{{people?.totalrecords}} 

aby to działało.

Dane są pobierane, zanim kątowy renderuje widok, ale odpowiedź prawdopodobnie nadejdzie później.

Z ?. kątowa nie ocenia .totalrecords, natomiast people ma wartość null.

+0

dzięki! więc muszę zawsze używać bezpieczeństwa? w moich szablonach? co jeśli nie mam wartości, czy mogę użyć {{? totalrecords}}, dzięki! – stackdave

+0

Gdy 'ludzie' jest' niezdefiniowany' lub 'null'' ludzie.totalrecords' rzuca, ponieważ 'null' nie ma własności' totalrecords'. Potrzebujesz tylko?? .', gdy część przed nim może stać się 'niezdefiniowana' lub' null'. Jeśli przypisujesz wartość początkową do 'people' (na przykład w konstruktorze), nie potrzebujesz'.? '. W przeciwnym razie 'ludzie' są niezdefiniowane do momentu przybycia wartości z serwera. 'ludzie? .totalrecords' jest krótką formą' ludzi? people.totalrecords: null' –

26

Jeśli chcesz zobaczyć json, po prostu trzeba to zrobić:

people: {{people | json}}