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

Question

他想显示从我的api到前端（Angular 6）的数据，但是出现此错误：我使用的是Angular 6的HttpClient方法，我是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

您正在尝试迭代一个对象而不是一个数组。发生这种情况是因为事件列表在* { margin: 0px; padding: 0px; }键内，但是您没有访问它来提取事件列表。而是使用响应对象的根。

更正的代码：

Events