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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

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

以上是 获取关系数据与Angular cli前端卡住 的全部内容， 来源链接： utcz.com/qa/262757.html

回到顶部