title: Getting relational data with Angular cli front-end stuck
body: <p>Back-end and Typescript is working fine since in browser Network tab I get what I want, my problem is that I am stuck in html... I don't know how to display the data.</p>
  
  <p>Here is what I what I get into the console from my web api 2:</p>
  
  <pre><code>{
   "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":[]
    }
   ]
  </code></pre>
  
  <p>}</p>
  
  <p>This is my model in case is not right:</p>
  
  <pre><code>export class Jobs {
  Id: number;
  Name: string;
  Description: string;
  DueDate: Date;
  IsCompleted?: boolean;
  
  worker: Worker[];
  </code></pre>
  
  <p>}</p>
  
  <p>This is my attempt in html component to display the data:</p>
  
  <pre><code>&lt;label class="labelInputs"&gt;Workers Assigned to this job&lt;/label&gt;
  &lt;div *ngFor="let job of jobs"&gt;
      &lt;div *ngFor="let worker of job.worker"&gt;
          &lt;label class="labelInputs" value="worker"&gt;
              {{worker.FirstName}}
          &lt;/label&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I get this error: <code>ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.</code></p>
  
  <p>It might be misleading because I don't even know how to display something nested so if someone can show me I would appreciate very much.</p>
  
  <p>I just want to display the workers first name in labels that are present in "Worker" thats all.</p>
  
  <p>Thank you very much</p>
  
  <p>EDIT:
  This is how I get my jobs.</p>
  
  <pre><code>getJobs(): void {
      const id = +this.route.snapshot.paramMap.get('id');
      this.jobsService.getJob(id)
          .subscribe(jobs =&gt; this.jobs = jobs);
  }
  </code></pre>
  
  <p>This is my service:</p>
  
  <pre><code>getJob(id: number): Observable&lt;Jobs&gt; {
      const url = `${this.apiURL}/${id}`;
  
      return this.http.get&lt;Jobs&gt;(url);
  }
  </code></pre>
  
  <p>Here initialization of Jobs and Workers as arrays or objects:</p>
  
  <pre><code>@Input() jobs: Jobs;
  
  public Job: Jobs;
  public Jobs: Jobs[];
  
  public workers: Worker[];
  public worker: Worker;
  </code></pre>