我有一个'Schedule'打字稿类和'Schedule'类型的'selectedSchedule'变量 . 时间表:
export class Schedule{
scheduleId: string;
sheduleDate: Date = new Date();
scheduleName: string;
jobs: Job[];
unscheduledEmployeesCount: number = 0;
idleEquipmentCount: number = 0;
unscheduledTrucksCount: number = 0;
}
我通过利用插值来绑定此变量及其在HTML中的属性 . 我的问题是我正在使用* ngFor来迭代并显示每个“工作”......
<div class="job" *ngFor="let j of selectedSchedule.jobs">
<div [ngClass]="{'hasEmployees': j.jobEmployees.length > 0 }">
<div *ngFor="let e of j.jobEmployees">
{{e.employee['name'] !== null ? e.employee['name'] : e.name}}
</div>
</div>
</div>
每当用户通过单击按钮触发'addJob()'方法时,Angular都不会检测到新创建的“作业”,并导致“作业”的属性为空,最明显的是“jobEmployees”每个'工作' . 我理解当您推开/移除开箱即用的对象时,Angular不会检测到数组的更改 . 我正在寻找一种解决方案,以便在用户添加新作业时接收这些更改 . 我试图重新分配'selectedSchedule'和它的'jobs'属性但没有成功 . 还试图通过'重新创建'数组来切片()jobs数组 . 我正在制作额外的http请求以再次获取日程安排的作业,这似乎可以防止出现null属性问题,但我希望找到更有效的解决方案 .
组件中的addJob()方法:
addJob() {
var newJob: Job;
this.data.addJob(this.selectedSchedule.scheduleId).subscribe(addedJob => {
this.selectedSchedule.jobs.push(addedJob);
this.data.loadSchedules().subscribe(success => {
if (success) {
this.selectedSchedule = this.data.schedules.find(schedule => schedule.scheduleId === this.selectedSchedule.scheduleId);
}
});
});
}
数据服务中的addJob()方法:
addJob(scheduleId: string) {
return this.http.get("/api/job/addjob", { headers: this.headers, params: { scheduleId: scheduleId } })
.map((job: Job) => {
return job;
});
}
'工作'课程:
export class Job {
jobId: string;
jobName: string;
jobNumber: string;
jobEmployees: Array<Employee> = new Array<Employee>();
jobEquipment: Array<Equipment> = new Array<Equipment>();
jobTrucks: Array<Truck> = new Array<Truck>();
}
1 回答
您正在寻找 ChangeDetectorRef ,通常这是通过Angulars更改检测完成的,该检测由其区域通知变更检测应该发生 . 无论何时在组件中手动订阅,只要订阅的流发出值,angular就会将组件实例标记为脏 .
尝试手动调用它,如下所示,