Не работает привязка данных-функция, запускаемая при выборе даты, изменяет свойство, но DOM не изменяется

В проекте Ionic2 у меня есть registersмассив, привязанный к шаблону, и средство выбора даты, которое запускает этот registersмассив для обновления. Проблема заключается в том, что обновление не отражено в DOM.

Вот шаблон:

{{ registers | json }}
<ion-datetime displayFormat="HH:mm:s" (ionChange)="makeAChange($event)"></ion-datetime>

Вот функция makeAChange:

makeAChange($event){
    this.registers.push({'in': new Date().toISOString(), 'out': new Date().toISOString()})
    console.log(this.registers)
  }

Регистры инициализируются следующим образом:

ngAfterViewInit(){
    this.registers = [{
      'in': new Date().toISOString(),
      'out': new Date().toISOString()
    }]
  }

После выбора даты я выхожу из обновленного this.регистрирует, и у него есть второй добавленный объект. Но регистры json на странице не меняются.

С помощью обычной ионной кнопки, прикрепленной к makeAChange (), изменение успешно выполняется в DOM.

Итак, нельзя ли использовать компонент ввода типа ion-datetime для изменения объектов, привязанных к DOM? Или есть способ заставить Ion-datetime работать таким образом, чтобы инициировать обновление (registersна странице), когда дата выбрана?

Любая помощь и Совет будут очень признательны.

(Обратите внимание, что это перегонка проблемы у меня есть получать обновления вступают в силу, как только дата выбрана.)

ОБНОВЛЕНИЕ

Привязка работает, если функция makeAChange() вызывается из обычного элемента ввода при нажатии enter: (keyup.enter)="makeAChange()"works. Новый объект добавляется в массив регистров и отражается в DOM.

Так почему же он не работает, когда функция запускается из средства выбора даты?

ОБНОВЛЕНИЕ

Когда элемент <ion-datetime>находится в <ion-item>элементе, привязка работает. Если кто-то может объяснить, что происходит, это было бы здорово!

1 ответ

  1. Попробуйте поместить this.registers.push(...)в такую зону:

    import { NgZone } from '@angular/core';
    
    export class MyPage {
      zone: NgZone;
    
      constructor() {
        this.zone = new NgZone({enableLongStackTrace: false});
      }
    
      makeAChange($event){
        this.zone.run(() => {
          this.registers.push({'in': new Date().toISOString(), 'out': new Date().toISOString()});
          console.log(this.registers);
        });
      }
    }