ngFor中的Kendo Datepickers

时间:2019-07-11 16:39:21

标签: angular kendo-ui

我有一个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更新字段。

需要进行哪些更改才能更新外观中的背景模型?

1 个答案:

答案 0 :(得分:0)

这应该解决您的代码:

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