2017-12-18 21 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