Как обновить поле ввода даты через ngModel в ngb-Datepicker?

Question

У меня есть поле ввода, в котором для даты используется ngb-datepicker.Когда я пытаюсь получить значение из средства выбора даты через ngModel, это работает.Но он не работает, когда я пытаюсь обновить ngModel из функции, поле ввода не обновляется.Ниже приведен фрагмент кода для справки.

рабочая ссылка stackblitz - рабочая ссылка При выборе даты в календаре сначала, а затем на следующий день обновляется значение в модальном, но не во входном файлекоробка.

<!-- typescript code -->

import {Component} from '@angular/core';

@Component({
  selector: 'ngbd-datepicker-popup',
  templateUrl: './datepicker-popup.html'
})
export class NgbdDatepickerPopup {
  model ;
  nextDay() {
    this.model.day = this.model.day +1 ;
  }
}

<!-- Html code -->


  
    
      
      
        
      
    
  



Next Day

Model: {{ model | json }}

Answer 1

Как я уже сказал в комментарии, в дереве компонентов есть точка, в которой было установлено ChangeDetectionStrategy.OnPush.В этом случае, внутри ngb-datepicker исходного кода , вы можете видеть, что эта стратегия используется.

Это означает, что алгоритм обнаружения изменений будет выполнен в его более легкой версии, и онбудет запускать обновление только в случае изменения ссылки на переменную.

Таким образом, чтобы инициировать обнаружение изменений, необходимо назначить новый объект переменной, а не изменять свойство на месте.

Вы можете воспользоваться оператором распространения, чтобы получить более элегантный код:

this.model = {...this.model, day: this.model.day+1};

Или просто создать новый объект в старом стиле:

this.model = Object.assign({}, this.model, {day: this.model.day+1});