在*ngfor角度2中显示[对象][对象]
在*ngfor角度2中显示[对象][对象]
提问于 2017-12-01 20:50:38
我从角向Controller发出请求，这是有效的，因为我已经检查了http请求，响应包含一个对象集合及其属性。问题是使用*ngfor在html视图中显示这些对象.我使用的是一个名为JobsService的服务：
@Injectable()
export class JobsService {
private _jobsUrl = 'http://localhost:59164/jobs';
constructor(private _http: Http) { }
getJobs(): Observable<Job[]> {
return this._http.get(this._jobsUrl).map((response: Response) => <Job>response.json())
.do(data => console.log('All: ' + JSON.parse(JSON.stringify(data)))).catch(this.handleError);
}
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json() || 'Server error')
}
}这是JobsComponent类：
import { Component, OnInit } from '@angular/core';
import { JobsService } from './jobs.service';
import { Job } from './job';
@Component({
templateUrl: './tsScripts/jobs/jobs.component.html',
providers: [JobsService]
})
export class JobsComponent implements OnInit {
jobs: Job[] = [];
errorMessage: string;
ngOnInit(): void {
console.log("in OnInit");
this._jobsService.getJobs().subscribe(jobs => this.jobs = jobs, error => this.errorMessage = <any>error);
}
constructor(private _jobsService: JobsService) {
}
}这是html页面：
<table class="table"> <!--*ngIf="jobs && jobs.length"-->
<tr *ngFor="let job of jobs">
<td>{{job.Title}}</td>
</tr>
</table>我得到了一个错误：
试图区分“对象对象”时出错。只允许数组和可迭代
我认为这是在抱怨，因为我期待一个数组，并且只是得到一个对象，如果是这样的话，我如何解决它呢？我认为组件中的变量jobs是Job类的数组.
以防万一这是Job类：
export class Job {
aut_id: number;
Title: string;
Description: string;
AuthorEmail: string;
Company: string;
Location: string;
TypeOfJob: string;
Salary: number;
CandidateExperience: string;
CandidateEducation: string;
Language: string;
Approved: string;
}这是C#控制器：
public JsonResult Index()
{
AzureStorageHelper az = new AzureStorageHelper();
var totalJobs = az.GetJobs();
var result = totalJobs.Where(j => string.Equals(j.Approved, "Approved", StringComparison.CurrentCultureIgnoreCase));
var test = result.ToList();
return Json(new { data = test }, JsonRequestBehavior.AllowGet);
}更新：
回答 1
Stack Overflow用户
发布于 2017-12-01 21:19:47
要转换响应，最好使用接口并将结果映射到自己的类。
我建议你这样做：
@Injectable()
export class JobsService {
private _jobsUrl = 'http://localhost:59164/jobs';
constructor(private _http: Http) { }
getJobs(): Observable<Job[]> {
return this._http.get(this._jobsUrl).map(response => response.json().map(job => this.mapToJob(job)))
.do(data => console.log('All: ' + JSON.parse(JSON.stringify(data)))).catch(this.handleError);
}
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json() || 'Server error')
}
private mapToJob(job: JobDTO): Job {
return new Job(
+job.aut_id,
job.Title,
job.Description,
job.AuthorEmail,
job.Company,
job.Location,
job.TypeOfJob,
+job.Salary,
job.CandidateExperience,
job.CandidateEducation,
job.Language,
job.Approved
)
}
}
export class Job{
aut_id: number;
Title: string;
Description: string;
AuthorEmail: string;
Company: string;
Location: string;
TypeOfJob: string;
Salary: number;
CandidateExperience: string;
CandidateEducation: string;
Language: string;
Approved: string;
}
export interface JobDTO{
aut_id: number;
Title: string;
Description: string;
AuthorEmail: string;
Company: string;
Location: string;
TypeOfJob: string;
Salary: number;
CandidateExperience: string;
CandidateEducation: string;
Language: string;
Approved: string;
}对于cast API，我使用一个接口，称为DTO (数据传输对象)，它帮助构建我的项目所知道的作业。
目前，DTO和类有相同的字段，但这可能是不同的。
注意另一件事：response.json().map(job => this.mapToJob(job))，因为我认为您的JSON返回一个数组？所以，我把它映射成一系列的乔布斯。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47601297
复制相关文章
相似问题
腾讯云开发者
