Json Angular6错误：我从api获取的数据是字符串格式的，下面是响应图像

我想将api中的数据显示到前端（Angular 6），但出现了这个错误：我正在使用Angular 6中的HttpClient方法我是Angular的新手

Angular6错误：我从api获取的数据是字符串格式的，我需要将其转换为object，下面是响应图像

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

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>

{{incident.Title}}
{{事件.事件状态}

您正在尝试迭代对象而不是数组。发生这种情况是因为事件列表位于

events

键内，但您没有访问它来提取事件列表。而是使用响应对象的根

更正代码：

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

ngOnInit（）{
this.dataStorageService.getEvents（）
.订阅(
（data:Incident[]）=>this.incidents=data.Events，//console.log（err），
（）=>console.log（'All done get incidents'）
);
}

您的json无效ry*ngFor=“let incident of incidents.Events”事件不存在，ar数组可能是我使用的最新angular 6 httpClient的副本，它有单独的获取数据的方法。我可以使用json.prase（）将字符串转换为对象吗？您好，谢谢您的建议。我也遵循了您的上述输入。我正在使用*ngFor=“let incident of Events.incidents应该已经有了数组，因为我正在使用data.Events，正如您所建议的，{{incidents}这给了我正确的值数组，但是当我尝试{{incident.Title}这给了我空值而不是值它是小写的

title

，你试过了吗？是的，我也试过小写，实际上来自api的值就是title本身。我知道了错误，但我不知道如何解决，就像我从api获得的数据是字符串格式的，我现在不知道如何转换它下面的对象是示例事件：[，…]0:“{IE_事件_开始_时间”：“IE_开始_时间”：“2018年8月14日10:50”，“标题”：“CSP登录页面上的间歇性问题”，“IE_开始_人”：“域”：“IT”，“影响”：“用户（监控和外部）现在将能够登录到CSP登录页面而不会出现任何问题。”}上面添加了响应图像

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