Question

我有一个'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都不会检测到新创建的“作业”，并导致“作业”的属性为空，最明显的是'每个'工作'的工作雇员。我理解当您推开/移除开箱即用的对象时，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>();
}

Answer 1

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

尝试按以下方式手动调用

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

对象的数组推送中的角度2变化检测

1 个答案: