Création d'un tableau d'objets à partir du type renvoyé de requête http Promise <Response>

Question

J'ai un service qui demande la demande GET du serveur API et renvoie json que j'ai converti en Promise, voici le code du service

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();
  }
}

Ensuite, j'ai importé ce service afin de lister les données de cette promesse dans une liste non ordonnée

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);
  }
}

Voici le journal pour osobe

ZoneAwarePromise { zone_symbol__state: null, __zone_symbol__value: Array (0)} __zone_symbol__state : vrai __zone_symbol__value : Réponse {_body: "[{" osobaID ": 1," ime ":" Aleksa "," prezime ":" Jevtic… "," prezime ":" Stevanovic "," jmbg ":" 2504996854112 "}]", état : 200, ok: true, statusText: "OK", headers: Headers,…} __proto : Objet

J'ai essayé de lister des objets en utilisant ngFor mais je n'ai obtenu aucune réponse sur la page html

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

Comment créer un tableau à partir de Promise? Ou au moins stocker les données de Promise à la liste? Désolé pour le code de journal laid, je ne sais pas comment le formaterais.

arrays angular http typescript angular-promise

0

Алекса Јевтић 27 nov. 2017 à 15:18

Answer 1

Il est normal que vous ayez besoin de votre API avec .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();
  }
}

Cette méthode renvoie le corps de la réponse.

Vérifiez également le .ts, vous avez une variable locale. Ce n'est pas accessible depuis le html:

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

  constructor(private osobaService: OsobaService) {}

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

De plus, je pense que votre code html est faux si vous le faites var osobe = this.osobaService.getOsobe();

Parce que vous assignez un observable mais dans votre html vous n'utilisez pas osobe comme observable.

Je dois aussi ajouter le tube asynchrone:

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

1

mickaelw 27 nov. 2017 à 13:02

Answer 2

Vous devez alors ajouter et saisir votre appel de fonction de service comme:

   this.osobaService.getOsobe().then((response) => {console.log(response);}).catch((error) => {console.log(error); });

0

AVI 3 août 2019 à 03:34

Answer 3

Essaye ça:

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

0

Akash Agrawal 27 nov. 2017 à 12:20

Création d'un tableau d'objets à partir du type renvoyé de requête http Promise <Response>

3 réponses

Questions connexes

De nouvelles questions

arrays