Javascript 为*ngFor格式化httpclient响应？

嗨，我想知道是否有人能帮我解决一个小问题。 我收到来自RESTAPI的数据，该数据作为数组返回，其中包含对象。 一旦我把数据送到我的服务中，我会尝试转换数据并将其推送到一个主题，这样它就可以通知我的组件数据在这里或已更新。 当我使用console.log记录我获得的数据时

0:{code: "AUH", name: "Abu Dhabi"}
1:{code: "ALY", name: "Alexandria"}
2:{code: "LTS", name: "Altus"}
3:{code: "ANK", name: "Ankara"}
4:{code: "AIY", name: "Atlantic City"}
5:{code: "BAK", name: "Baku"}
6:{code: "BKK", name: "Bangkok"}
7:{code: "EAP", name: "Basel"}
8:{code: "BJS", name: "Beijing"}

所以当我尝试使用*ngFor时，我得到了[object]p[object] 如何格式化此文件以与*ngFor一起使用

city-list.component.html

从“/services/city list.service”导入{CityService}；
从“@angular/core”导入{Component，OnInit，OnDestroy}；
从“./cities/models/City”导入{City}；
从“rxjs”导入{Subscription}；
@组成部分({
选择器：“”，
templateUrl:“./city list.component.html”
})
导出类CityListComponent实现OnInit、OnDestroy{
城市：城市[]；
private citiesSub:Subscription；//以便在页面更改/内存泄漏时取消订阅
构造函数（公共城市服务：城市服务）{}
恩戈尼尼特（）{
this.cityService.getCities（）；
this.citiesSub=this.cityService
.getCityUpdateListener（）
.订阅（（城市）=>{
这个。城市=城市；
});
//第一个值：数据发出时第二个值：错误发出，第三个值函数用于无更多数据可用时
}
恩贡德斯特罗（）{
this.citiesSub.unsubscribe（）；
}
}
//subject是一个可观察的对象，但您可以在需要时调用它们发出更改

尝试如下，首先从http调用接收的响应对象中获取密钥，然后在html中遍历每个密钥，这可能会解决您的问题

在ts文件中

//response is data you received after making http call, list of cities in your case 
keys = Object.keys(response);

在html文件中

<div *ngFor="let key of keys">
  {{response[key].code }}  {{response[key].name }}
</div>

{{response[key].code}}{{response[key].name}

---

这应该基于您从服务器得到的响应而起作用，尝试如下，首先从您从http调用接收的响应对象中获取密钥，然后在html中遍历每个密钥，可能会解决您的问题

在ts文件中

//response is data you received after making http call, list of cities in your case 
keys = Object.keys(response);

在html文件中

<div *ngFor="let key of keys">
  {{response[key].code }}  {{response[key].name }}
</div>

{{response[key].code}}{{response[key].name}

---

这应该基于您从服务器得到的响应而起作用。这里的问题似乎是您实际上并没有返回

City

数组，而是返回字典或

Map

。您可能希望迭代响应并将其映射到正确的类型

this.citiesSub = this.cityService
      .getCityUpdateListener()
      .subscribe((cityMap) => {
        this.cities = [ ...cityMap.values() ]
    });

---

这里的问题似乎是，您实际上并没有返回

城市

的数组，而是返回字典或

地图

。您可能希望迭代响应并将其映射到正确的类型

this.citiesSub = this.cityService
      .getCityUpdateListener()
      .subscribe((cityMap) => {
        this.cities = [ ...cityMap.values() ]
    });

---

您可以使用

json

管道：

<div *ngFor="let item of response">{{ item | json }}</div>

{{item|json}

---

如果您想以“pretty”而不是json的形式显示它，您需要访问该项的各个字段，并以所需的方式对其进行格式化

您可以使用

json

管道：

<div *ngFor="let item of response">{{ item | json }}</div>

{{item|json}

---

如果您想以“pretty”而不是json的形式显示它，您需要访问该项的各个字段，并以所需的方式对其进行格式化

如果您使用的是httpClient（angular5中发布的新版本），那么就不需要map（）和pipe（）函数，默认情况下，结果映射到json，您只需订阅服务即可 这就是您的新服务类的外观

import { Subject } from 'rxjs';
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

import { map } from "rxjs/operators";

import {City} from '../models/city';

@Injectable()
export class CityService {
  cities: City[] = [];
  private updatedCities = new Subject<City[]>();


  constructor(private http: HttpClient) {}

  getCities() {
    return this.http.get<City[]>('http://localhost:3000/cities')//http.get<any> also work but for type safety i am asuming City[] array have the same structure.      
  }

  getCityUpdateListener() {
    return this.updatedCities.asObservable();
  }

}

我希望这能解决你的问题，

---

感谢如果您使用的是httpClient（angular5中发布的新版本），那么就不需要map（）和pipe（）函数，默认情况下，结果映射到json，您只需订阅服务即可 这就是您的新服务类的外观

import { Subject } from 'rxjs';
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

import { map } from "rxjs/operators";

import {City} from '../models/city';

@Injectable()
export class CityService {
  cities: City[] = [];
  private updatedCities = new Subject<City[]>();


  constructor(private http: HttpClient) {}

  getCities() {
    return this.http.get<City[]>('http://localhost:3000/cities')//http.get<any> also work but for type safety i am asuming City[] array have the same structure.      
  }

  getCityUpdateListener() {
    return this.updatedCities.asObservable();
  }

}

我希望这能解决你的问题，

---

谢谢

这是代码？你能在stackbiz提供吗？有可能吗？我的回答可能对你有用吗？这是代码吗？你能在stackbiz提供吗？有可能吗？我的回答可能对你有用吗