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

【问题标题】：Making an array of objects from returned type of http request Promise<Response>从返回的 http 请求 Promise<Response> 类型创建一个对象数组
【发布时间】：2019-08-03 11:34:41
【问题描述】：

我有一个服务，它从 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__值：响应 {_body: "[{"osobaID":1,"ime":"Aleksa ","prezime":"Jevtic...","prezime":"Stevanovic","jmbg":"2504996854112"}]"，状态: 200, ok: true, statusText: "OK", headers: Headers, …} __proto ：对象

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

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

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

【问题讨论】：

标签： arrays angular http typescript angular-promise

【解决方案1】：

你的 API 必须带有 .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();
  }
}

此方法返回响应的正文。

也检查 .ts，你有一个本地变量。无法从 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>

【讨论】：

“Observable”类型上不存在属性“map”。
@АлексаЈевтић 你能添加 import "rxjs/add/observable/map";进入你的服务文件？
@АлексаЈевтић stackoverflow.com/questions/36947748/…
我现在得到不同的日志，管理得更好，但即使添加了异步管道，我仍然无法列出它们，有什么想法吗？
让我们continue this discussion in chat。

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案3】：

您必须添加 then 并在您的服务函数调用中捕获，例如：

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

【讨论】：