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

我想你想要排除你的第一个qazxsw poi循环，因为你不能迭代一个Object。

*ngFor

---

您还需要填充Jobs和Workers。

所以...

<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);
}

，可以更好地证明这一点。