2

我有一个使用 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>

4

1 回答 1

3

正如我在评论中所说，组件树中有一些点已经设置ChangeDetectionStrategy.OnPush。在这种情况下，在ngb-datepicker源代码中，您可以看到使用了这种策略。

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

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

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

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

或者只是以旧式方式创建一个新对象：

this.model = Object.assign({}, this.model, {day: this.model.day+1});
于 2018-12-06T13:29:54.640 回答