Question

您好，我想知道是否有人可以帮我解决一个小问题。我收到了来自我的rest api的数据，这些数据作为一个包含对象的数组返回。一旦我得到它的服务，我尝试转换数据并将其推送到主题，以便它可以通知我的组件数据在这里或更新。当我在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时我得到[对象] p [对象] 如何格式化以使用* ngFor？

城市list.component.html

import { CityService } from "./services/city-list.service";
import { Component, OnInit, OnDestroy } from "@angular/core";
import { City } from "../cities/models/city";
import { Subscription } from "rxjs";

@Component({
  selector: "<app-cities></app-cities>",
  templateUrl: "./city-list.component.html"
})
export class CityListComponent implements OnInit, OnDestroy {
  cities: City[];
  private citiesSub: Subscription; // so as to unsubscribe if page changes/ memory leak

  constructor(public cityService: CityService) {}

  ngOnInit() {
    this.cityService.getCities();
    this.citiesSub = this.cityService
      .getCityUpdateListener()
      .subscribe((cities) => {
       this.cities = cities;
      });



    // 1st value: when data emit 2nd value: error emit, 3rd value function for when no more data is available
  }

  ngOnDestroy() {
    this.citiesSub.unsubscribe();
  }
}
// subject is an observable but you can call next on them to emit a change when you want

“服务”

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() {
  this.http.get<{message: string; cities: City[]}>('http://localhost:3000/cities')
  .pipe(
    map((cityData)=>{

      return cityData.cities.map(city=>{
        return{
          code: city.code,
          name: city.name
        };
      });
    })
)
  .subscribe((transCity) => {
    this.cities = transCity;
    console.log(this.cities);
    this.updatedCities.next([...this.cities]);
  });
  }

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

}

Answer 1

尝试如下，首先获取您从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>

这应该基于您从服务器获取的响应

Answer 2

您可以使用json管道：

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

如果你想在＆＃34;漂亮＆＃34;而不是像json，您需要访问项目的各个字段并以所需的方式格式化它。

Answer 3

看起来这里的问题是你实际上并没有返回City的数组，而是返回字典或Map<City>。您可能希望迭代您的响应并将其映射到正确的类型。

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

Answer 4

假设您使用的是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();
  }

}

然后在您的组件中，您必须订阅该服务并使用它

    constructor(public cityService: CityService) {
       this.cityService.getCities().subscribe(cities => {
           this.cities = cities;
           console.log(cities);

       }, error=> {console.log(error)});//handling errors
     }

  ngOnInit() {  }  // just moved the service call to the constructor of the component

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

为* ngFor格式化httpclient响应？

4 个答案: