javascript - Angular 5 - HTTP Client - chuyển resp.body thành Mảng

Tôi đang cố gắng lấy phản hồi JSON từ dịch vụ HttpClient vào một mảng để có thể lặp qua nó bằng *ngFor trong HTML của tôi. Tôi đã thử sử dụng "this" để lặp nhưng *ngFor sẽ không chấp nhận nó. Dưới đây là mã cho component service.ts của tôi và component.ts chính.

Tôi chỉ cần một cách nào đó để chuyển đổi một mảng từ "resp.body" thành một mảng có thể xuất ra để sử dụng cho nội suy chuỗi trong html. Bất kỳ sự giúp đỡ nào cũng sẽ được đánh giá cao!

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

Câu trả lời #1

Để khắc phục vấn đề, bạn cần tạo một giao diện phù hợp với dữ liệu bạn nhận được từ máy chủ, tôi sẽ gọi giao diện này là IRace.

Sau đó trong component, tôi sẽ tạo một biến tên là races, tôi sẽ gán giá trị trả về từ phản hồi của server, tức là resp.body, cho biến races.

Tôi sẽ thay đổi dịch vụ để trông như thế này:

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

Cuối cùng, tôi sẽ thay đổi thành phần chủng tộc thành như sau:

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

Tôi hy vọng điều này sẽ giúp ích.