Angular 5 -HTTP客户端 - 将REVS.Body转换为数组

Question

我试图将我的JSON响应从HttpClient服务中获取到数组中，以便我可以通过在HTML中使用*ngFor循环。我已经尝试使用"此"来循环，但是*ngFor不会接受。以下是我的service.ts组件和主组件的代码。

我只需要某种方法将数组从" resp.body"转换为可导出的数组，以用于HTML中的字符串插值。任何帮助将不胜感激！

races.component.ts

import { Component, OnInit } from '@angular/core';
import {Race, RacesService} from './races.service';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'dh-races',
  templateUrl: './races.component.html',
  providers: [ RacesService ],
  styleUrls: ['./races.component.scss']
})
export class RacesComponent {
  error: any;
  headers: string[];
  race: Race;
  raceM: any[];
  constructor(private racesService: RacesService) {
    var raceM = [];
    var raceArray = [];
    this.racesService.getRaceResponse()
      .subscribe(resp => {
        raceArray.push(resp.body);
        for (let obj of raceArray) {
          for (let i in obj) {
            raceM.push({
              "ID": obj[i].id + ",",
              "Date": obj[i].activityStartDate,
              "RaceName": obj[i].assetName,
              "Website": obj[i].website
            })
          }
          console.log(raceM);
          return raceM;
        }
      });
  }

races.service.ts

@Injectable()
export class RacesService {
  constructor(private httpClient: HttpClient) { }
  getRace() {
    return this.httpClient.get(activeApiURL).pipe(
      retry(3),
      catchError(this.handleError)
    );
  }
  getRaceResponse(): Observable<HttpResponse<Race>> {
    return this.httpClient.get<Race>(
      activeApiURL, {
        observe: 'response'
      });
  }

Answer 1

要解决问题，您需要创建一个与从服务器获得的数据匹配的界面，我将调用此接口IRace。

然后，在组件中，我将创建一个名为 races的变量，我将从服务器响应(即resp.body(分配返回的值，即races变量。

我会更改服务，看起来像这样：

export interface IRace {
   // Your response from server object's properties here like so:
   id: Number;
   assetName: string;
   ...
}
export class RacesService {
  constructor(private httpClient: HttpClient) { }
  getRace() {
    return this.httpClient.get(activeApiURL).pipe(
      retry(3),
      catchError(this.handleError)
    );
  }
  getRaceResponse(): Observable<HttpResponse<Array<Race>>> {
    return this.httpClient.get<Array<Race>>(
      activeApiURL, {
        observe: 'response'
      });
  }
}

最后，我会将比赛组件更改为：

import { Component, OnInit } from '@angular/core';
import { Race, RacesService, IRace } from './races.service';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'dh-races',
  templateUrl: './races.component.html',
  providers: [ RacesService ],
  styleUrls: ['./races.component.scss']
})
export class RacesComponent {
  error: any;
  headers: string[];
  races: IRace[];
  constructor(private racesService: RacesService) {
    this.racesService.getRaceResponse()
      .subscribe(resp => {
        this.races = resp.body;
      });
  }
}

我希望这会有所帮助。