對對象進行數組推送時的角度2變化檢測

Question

我有一個“計划”打字稿類和這種“計划”類型的“ 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都不會檢測到新創建的“ job”，並且會導致“ job”的屬性為null，最顯着的是每個“工作”。 我了解當您開箱即用將對象推/刪除時，Angular不會檢測到對數組的更改。 我正在尋找一種解決方案，以在用戶添加新作業時應對這些更改。 我試圖重新分配“ selectedSchedule”及其“工作”屬性，但沒有成功。 還嘗試過用“重新創建”數組的方式來對jobs數組進行slice（）。 我目前正在發出一個額外的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變化檢測其被通過其區域通知更改檢測應該發生完成。 每當您手動訂閱組件時，只要訂閱的流發出值，就會用角度將組件實例標記為臟。

嘗試如下手動調用它，

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