ngFor中的Kendo Datepickers

Question

我在ngFor循环中显示了一个包含5个Datepickers的列表。当用户选择一个值时，我可以看到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>