Question

我有一个使用ngb-datepicker作为日期的输入框。当我尝试通过ngModel从日期选择器中获取值时，它正在工作。但是，当我尝试从函数更新ngModel时，它不起作用，输入框没有更新。请在下面找到该代码段仅供参考。

有效的stackblitz链接为-Working Link 首先从日历中选择日期，然后从第二天中选择日期，这将以模式形式（而不是输入框）更新值。

<!-- 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>

Answer 1

正如我在评论中所说，在组件树中有一些地方已设置ChangeDetectionStrategy.OnPush。在这种情况下，inside the ngb-datepicker source code，您会看到使用了该策略。

这意味着更改检测算法将以其较轻的版本执行，并且仅当变量引用发生更改时才会触发更新。

因此，为了触发更改检测，您必须为变量分配一个新对象，而不是就地更改属性。

您可以利用Spread运算符获得更优雅的代码：

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

或者仅以旧样式创建新对象：

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

如何通过ngb-Datepicker中的ngModel更新输入框日期？

1 个答案: