Как обновить поле ввода даты через ngModel в ngb-Datepicker?
У меня есть поле ввода, которое использует 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 -->
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="yyyy-mm-dd"
name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
</div>
</div>
</div>
</form>
<hr/>
<button class="btn btn-sm btn-outline-primary mr-2" (click)="nextDay()">Next Day</button>
<pre>Model: {{ model | json }}</pre>
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});