Обнаружение изменений Angular 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 и приводит к тому, что свойства' задания 'становятся нулевыми, в частности,' jobEmployees 'каждого из' заданий '.Я понимаю, что Angular не обнаруживает изменения в массиве, когда вы помещаете / удаляете объекты из коробки.Я ищу решение, чтобы учесть эти изменения, когда пользователь добавляет новую работу.Я попытался переназначить свойство selectedSchedule и его свойства jobs безуспешно.Также попытался выполнить slice () массив jobs с мыслью о «воссоздании» массива.В настоящее время я делаю дополнительный http-запрос, чтобы снова получить задания расписания, что, похоже, предотвращает проблемы с нулевым свойством, но я надеюсь найти более эффективное решение.

Метод 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;
        });
}

Класс '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();