使用 Angular cli 前端卡住获取关系数据

Question

后端和 Typescript 工作正常，因为在浏览器网络选项卡中我得到了我想要的，我的问题是我被困在 html 中......我不知道如何显示数据。

这是我从 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);
}

这里将 Jobs 和 Workers 初始化为数组或对象：

@Input() jobs: Jobs;

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

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

Answer 1

我认为您想排除您的第一个 *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>

---

您还需要填充 Jobs 和 Workers。

所以……

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，它更好地证明了这一点。