Ошибка Angular6: данные, которые я получаю от API, имеют формат строки, ниже приведено изображение ответа

Question

Привет, я хочу показать данные из моего API в мой веб-интерфейс (Angular 6), но появляется эта ошибка: я использую метод HttpClient из Angular 6 Я новичок в Angular

Ошибка Angular6: данные, которые я получаю от API, имеют формат строки, мне нужно преобразовать их в объект, ниже приведено изображение ответа

это model.ts

export class Incident {
public Title: string;
public status: string;
constructor(Title: string, status: string) {
this.status = status;
this.Title= Title;
}
}

это компонент

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Incident } from '../../shared/incidents.model';
import { DataStorageService } from '../../shared/data-storage.service';

@Component({
selector: 'app-active-incident',
templateUrl: './active-incident.component.html',
styleUrls: ['./active-incident.component.css']
})
export class ActiveIncidentComponent implements OnInit {

incidents: Incident[];

constructor(private router: Router, private dataStorageService: DataStorageService) { }

ngOnInit() {
  this.dataStorageService.getIncidents()
  .subscribe(
    (data: Incident[]) => this.incidents = data,
    (err: any) => console.log(err),
    () => console.log('All done getting incidents')
  );
}

это сервис

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

import { Observable } from 'rxjs/Observable';
import { Incident } from './incidents.model';

@Injectable()
export class DataStorageService {
constructor(private http: HttpClient) {}

getIncidents(): Observable<Incident[]> {
console.log('Getting all incidents from server');
return this.http.get<Incident[]> 
('api/url');
}
}

мой JSON

{
"Events": ["{'title': 'some title', 'Incident_Status': 'status'}",
"{'title': 'some title', 'Incident_Status': 'status'}"]
}

просмотр HTML

<div class="card" *ngFor="let incident of incidents">
 <div class="card-header">
 <span class="badge badge-danger"></span>{{incident.Title}}
 <span class="badge badge-danger"></span>{{incident.Incident_Status}}
 </div>
 </div>

Answer 1

Вы пытаетесь перебрать объект вместо массива.Это происходит потому, что список событий находится внутри клавиши Events, но вы не получаете к нему доступ для извлечения списка событий.Вместо этого вы используете корень объекта ответа.

Исправленный код:

ngOnInit() {
  this.dataStorageService.getIncidents()
  .subscribe(
    (data: Incident[]) => this.incidents = data.Events, // <--
    (err: any) => console.log(err),
    () => console.log('All done getting incidents')
  );
}