Question

我有一个服务从API服务器请求GET请求并返回我转换为Promise的json，这里是服务代码

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

然后我导入了该服务，以便将该承诺中的数据列入无序列表

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

这是osobe的日志

ZoneAwarePromise { zone_symbol__state：null，__ zone_symbol__value：Array（0）} __zone_symbol__state ：真正 __zone_symbol__value ：回应{_body：＆＃34; [{＆＃34; osobaID＆＃34;：1，＆＃34; ime＆＃34;：＆＃34; Aleksa＆＃34;，＆＃34; prezime＆＃34;：＆＃34; Jevtic ...＆＃34;＆＃34; prezime＆＃34;：＆＃34;斯特万诺维奇＆＃34;＆＃34; jmbg＆＃34;：＆＃34; 2504996854112＆＃34;}]＆＃34 ;，状态：200，ok：true，statusText：＆＃34; OK＆＃34;，header：Headers，...} __proto ：对象

我尝试使用ngFor列出对象，但我没有在html页面上得到任何回复

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

我如何从Promise创建一个数组？或者至少将Promise的数据存储到列表中？对于丑陋的日志代码我很抱歉，我不确定如何格式化它。

Answer 1

您必须使用.json（）：

来使用API

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

此方法返回响应的正文。

检查.ts，你有一个localy变量。它不能从html访问：

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

  constructor(private osobaService: OsobaService) {}

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

此外，如果您执行var osobe = this.osobaService.getOsobe();

，我认为您的HTML代码有误

因为，您指定了一个可观察的但是在您的HTML中，您不会将osobe用作可观察的。

我也必须添加异步管道：

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

Answer 2

试试这个：

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

Answer 3

你必须添加然后捕获你的服务函数调用，如：

this.osobaService.getOsobe（）。then（（response）=＆gt; {console.log（response）;}）。catch（（error）=＆gt; {console.log（error）;}）; < / p>

从返回类型的http请求Promise <response>中创建一个对象数组

3 个答案: