首页 文章

对象的阵列推送时的角度2变化检测

提问于
浏览
0

我有一个'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 回答

  • 0

    您正在寻找 ChangeDetectorRef ,通常这是通过Angulars更改检测完成的,该检测由其区域通知变更检测应该发生 . 无论何时在组件中手动订阅,只要订阅的流发出值,angular就会将组件实例标记为脏 .

    尝试手动调用它,如下所示,

    this.selectedSchedule = this.data.schedules.find(schedule => schedule.scheduleId === this.selectedSchedule.scheduleId);
       this.cdRef.detectChanges();
    

相关问题