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

后端和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;

来源

2017-12-18 Eduard

哪里'jobs = Array （）'？ – Zze

我想你想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这表明这更好。

来源

2017-12-20 00:05:44 Zze

我觉得你是对的，但我对Angular很不好。所以我在我的ts组件中定义了这个'Jobs：Jobs [];'或者像这样'jobs = Array （）'，并且在这个'Jobs.worker'中说“worker is not defined”。如果我这样做'工作：工作;'我的工作人员正在看到工人，但在这里：'{{工人。FirstName}}'我得到'名字未定义' – Eduard

请参阅我的更新@Eduard。您需要正确实例化作业 - 而不仅仅是阵列。 :) – Zze

好吧，它变得混乱。首先“一个构造函数不能有这个参数”它在ngOnInit中有效。但是，然后每个地方去哪里？为了得到我的工作，我在我现在编辑的问题中使用了该方法。我应该用我的foreach？ – Eduard

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

回答

相关问题