2017-11-27 3 views
0

ich einen Dienst haben, die Anforderung von API-Server anfordert GET und gibt json, die ich zu verspreche umgewandelt, hier ist der Code für Serviceein Array von Objekten aus zurück Art von HTTP-Anfrage Versprechen machen <Response>

import { Injectable } from "@angular/core"; 
import { HttpClientModule } from "@angular/common/http"; 
import { HttpModule, Http } from "@angular/http"; 
import { Osoba } from "./osoba"; 
import "rxjs/add/observable/of"; 
import { Response } from "@angular/http/src/static_response"; 

@Injectable() 
export class OsobaService { 
    constructor(private http: Http) {} 
    public getOsobe(): Promise<any> { 
    return this.http.get("http://localhost:62066/api/values").toPromise(); 
    } 
} 

Dann i importiert diesen Dienst, um die Daten von diesem Versprechen in ungeordnete Liste

import { Component, OnInit } from "@angular/core"; 
import { Osoba } from "../osoba"; 
import { OsobaService } from "../osoba.service"; 
import "rxjs/add/operator/toPromise"; 

@Component({ 
    selector: "app-table-view", 
    templateUrl: "./table-view.component.html", 
    styleUrls: ["./table-view.component.css"] 
}) 
export class TableViewComponent implements OnInit { 
    constructor(private osobaService: OsobaService) {} 

    ngOnInit() { 
    var osobe = this.osobaService.getOsobe(); 
    console.log(osobe); 
    } 
} 

hier ist das Protokoll für osobe

ZoneAw zur Liste arePromise {zone_symbol__state: null, __zone_symbol__value: Array (0)} __zone_symbol__state : wahre __zone_symbol__value : Antwort {_body: "[{" osobaID ": 1" ime ":" Aleksa“, "prezime": "Jevtic ...", "prezime": "Stevanovic", "jmbg": "2504996854112"}] ", Status: 200, ok: true, statusText:" OK ", Kopfzeilen: Kopfzeilen, ...} __proto : Objekt

ich habe versucht, Objekte Angebot mit ngFor aber ich habe keine respond auf hTML-Seite

<ul><li *ngFor="let osoba of osobe"> 
{{osoba.ID}} {{osoba.ime}} 
</li> 
</ul> 

Wie würde ich ein Array von Promise erstellen? Oder zumindest Daten von Promise zur Liste speichern? Sorry für hässlichen Log-Code Ich bin mir nicht sicher, wie würde ich es formatieren.

Antwort

1

Es ist normal, müssen Sie Ihre API mit .json():

import "rxjs/add/observable/map"; //<-- add this import 


@Injectable() 
export class OsobaService { 
    constructor(private http: Http) {} 
    public getOsobe(): Promise<any> { 
    return this.http.get("http://localhost:62066/api/values") 
     .map(res => res.json()) //<-- here 
     .toPromise(); 
    } 
} 

Diese Methode den Körper der Antwort zurück.

Überprüfen Sie auch die .ts, Sie haben eine Localy-Variable. Es ist nicht erreichbar von den HTML-Code:

export class TableViewComponent implements OnInit { 
    osobe: Promise<any> //<-- add 

    constructor(private osobaService: OsobaService) {} 

    ngOnInit() { 
    this.osobe = this.osobaService.getOsobe(); //<-- update 
    } 
} 

Außerdem denke ich, Ihre HTML-Code ist falsch, wenn Sie var osobe = this.osobaService.getOsobe();

tun, weil Sie einen beobachtbaren zuweisen, aber in Ihrem HTML Sie nicht verwenden osobe als beobachtbare .

Ich muss das Asynchron-Rohr hinzufügen zu:

<ul> 
    <li *ngFor="let osoba of osobe | async">{{osoba.osobaID}} {{osoba.ime}}</li> 
</ul> 
+0

Eigenschaft 'Karte' existiert nicht auf Typ 'Observable '. –

+1

@ АлексаЈевтић können Sie hinzufügen "rxjs/add/observable/map"; in deine Servicedatei? – mickaelw

+0

@ АлексаЈевтић https://stackoverflow.com/questions/36947748/angular-2-beta-17-property-map-does-not-exist-on-type-observableresponse – mickaelw

0

Try this:

return this.http.get("http://localhost:62066/api/values").map(res => res.json()); 
0

Sie müssen dann fügen Sie und fangen in Ihrem Service-Funktionsaufruf wie:.

this.osobaService.getOsobe() dann ((Antwort) => {console.log (Antwort);}). catch ((Fehler) => {console.log (Fehler);});

Verwandte Themen