後端和Typescript工作正常,因爲在瀏覽器網絡選項卡我得到我想要的,我的問題是,我被困在HTML ...我不知道如何顯示數據。獲取關係數據與Angular cli前端卡住
這裏是我什麼,我進入控制檯從我的Web API 2:
{
"Id":1,
"Name":"testete",
"Description":"Test",
"DueDate":"2017-1205T15:14:27.307",
"IsCompleted":true,
"Worker":
[
{
"Id":1,
"FirstName":"Johnny",
"LastName":"Doe",
"Job":[]
},
{"Id":2,"FirstName":"yyyy","LastName":"yyyyy","Job":[]},
{"Id":3,"FirstName":"bbbbb","LastName":"vvvvvvvv","Job":[]
}
]
}
這是我的情況下,模型是不正確的:
export class Jobs {
Id: number;
Name: string;
Description: string;
DueDate: Date;
IsCompleted?: boolean;
worker: Worker[];
}
這是我在html組件中顯示數據的嘗試:
<label class="labelInputs">Workers Assigned to this job</label>
<div *ngFor="let job of jobs">
<div *ngFor="let worker of job.worker">
<label class="labelInputs" value="worker">
{{worker.FirstName}}
</label>
</div>
</div>
我得到這個錯誤:ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
這可能是誤導,因爲我甚至不知道如何顯示嵌套的東西,所以如果有人可以告訴我,我將非常感謝。
我只想顯示在「工人」中存在的所有標籤中的工人名字。
非常感謝您
編輯: 這是我如何得到我的工作。
getJobs(): void {
const id = +this.route.snapshot.paramMap.get('id');
this.jobsService.getJob(id)
.subscribe(jobs => this.jobs = jobs);
}
這是我的服務:
getJob(id: number): Observable<Jobs> {
const url = `${this.apiURL}/${id}`;
return this.http.get<Jobs>(url);
}
這裏工作和工作人員的初始化數組或者對象:
@Input() jobs: Jobs;
public Job: Jobs;
public Jobs: Jobs[];
public workers: Worker[];
public worker: Worker;
哪裏'jobs = Array()'? –
Zze