ngFor 中的 Kendo Datepickers

Question

我在ngFor 循环中显示了 5 个日期选择器的列表。当用户选择一个值时，我可以看到 let 值正在更新。但是，支持模型永远不会更新。

我的app.component.ts很直接

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

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',

})
export class AppComponent {
    public value: Date = new Date(2000, 2, 10);
    public dateValues = [
      new Date(2019, 1, 1), 
      null, 
      new Date(2019, 3, 1), 
      null, 
      new Date(2019, 5, 1)];
}

视图如下：

<div *ngFor="let b of dateValues; let i = index">
    <div class="input-group registration-date-time">
        <kendo-datepicker class="form-control" [(value)]="b"></kendo-datepicker>
    </div>
</div>

<div *ngFor="let b of dateValues">
  <div>{{b}}</div>
</div>

<br/>
<kendo-datepicker  class="form-control" [(value)]="value"></kendo-datepicker>
VALUE IS: {{value}}

这里有一个现场演示：https://stackblitz.com/edit/angular-3pcquq，它还显示了 ngFor 之外的 DatePicker 更新字段。

需要更改哪些内容才能更新外观中的支持模型？

Answer 1

这应该可以修复您的代码：

<div *ngFor="let b of dateValues; let i = index">
    <div class="input-group registration-date-time">
        <kendo-datepicker class="form-control" [(value)]="dateValues[i]"></kendo-datepicker>
    </div>
</div>