Erhalten von relationalen Daten mit Angular cli Front-End stecken

Question

Back-End und Typoskript funktioniert gut, da im Browser Netzwerk-Registerkarte bekomme ich was ich will, mein Problem ist, dass ich in HTML stecke ... Ich weiß nicht wie um die Daten anzuzeigen. Hier

ist, was ich, was ich in die Konsole aus meinem 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":[] 
    } 
] 

}

Das ist mein Modell in Fall nicht richtig:

export class Jobs { 
Id: number; 
Name: string; 
Description: string; 
DueDate: Date; 
IsCompleted?: boolean; 

worker: Worker[]; 

}

Dies ist mein Versuch in HTML-Komponente, um die Daten anzuzeigen:

<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> 

ich diesen Fehler: ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Es könnte irreführend sein, weil ich nicht einmal wissen, wie etwas verschachtelt angezeigt werden so, wenn jemand mir zeigen kann, würde ich es sehr schätzen.

Ich möchte nur den Vornamen der Arbeiter in Etiketten anzeigen, die in "Worker" vorhanden sind, das ist alles.

Vielen Dank

EDIT: Dies ist, wie ich meine Jobs zu bekommen.

getJobs(): void { 
    const id = +this.route.snapshot.paramMap.get('id'); 
    this.jobsService.getJob(id) 
     .subscribe(jobs => this.jobs = jobs); 
} 

Das ist mein Service:

getJob(id: number): Observable<Jobs> { 
    const url = `${this.apiURL}/${id}`; 

    return this.http.get<Jobs>(url); 
} 

Hier Initialisierung von Jobs und Arbeiter als Arrays oder Objekte:

@Input() jobs: Jobs; 

public Job: Jobs; 
public Jobs: Jobs[]; 

public workers: Worker[]; 
public worker: Worker; 

Answer 1

Ich glaube, Sie Ihre erste *ngFor Schleife exlude wollen, wie Sie können iteriere ein Objekt nicht.

<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> 

---

Sie müssen auch Jobs und Arbeiter füllen.

So ...

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

Dann müssen Sie die Daten hinzufügen, die Sie von dem Server über so etwas wie erhalten:

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

Update:

Hier ist ein Arbeiten plunkr, die dies besser demonstriert.