2017-12-18 15 views
1

後端和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; 
+1

哪裏'jobs = Array ()'? – Zze

回答

3

我想你想exlude你的第一個*ngFor循環,你可以迭代一個對象。

<label class="labelInputs">Workers Assigned to this job</label> 
<div *ngFor="let worker of Jobs.worker"> 
    <label class="labelInputs" value="worker"> 
     {{worker.FirstName}} 
    </label> 
</div> 

您還需要填充工作和工作人員。

所以......

export class Jobs { 
... 
    constructor(){ 
    this.Workers = new Array<Worker>(); 
    } 
} 

然後,你需要通過類似加你從服務器接收到的數據:

job = new Jobs(); 
for each(var worker in data.Worker){ 
    Job.Workers.push(worker as Worker); 
} 

更新:

這裏是一個工作plunkr這表明這更好。

+0

我覺得你是對的,但我對Angular很不好。所以我在我的ts組件中定義了這個'Jobs:Jobs [];'或者像這樣'jobs = Array ()',並且在這個'Jobs.worker'中說「worker is not defined」。如果我這樣做'工作:工作;'我的工作人員正在看到工人,但在這裏:'{{工人。FirstName}}'我得到'名字未定義' – Eduard

+1

請參閱我的更新@Eduard。您需要正確實例化作業 - 而不僅僅是陣列。 :) – Zze

+0

好吧,它變得混亂。首先「一個構造函數不能有這個參數」它在ngOnInit中有效。但是,然後每個地方去哪裏?爲了得到我的工作,我在我現在編輯的問題中使用了該方法。我應該用我的foreach? – Eduard