Кендо Datepickers внутри ngFor

Question

У меня есть список из 5 DatePicker, отображаемых в цикле ngFor. Когда пользователь выбирает значение, я вижу, что значение 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, которая также показывает поле обновления DatePicker вне ngFor.

Что необходимо изменить, чтобы обновилась модель поддержки в виде?

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>