时间戳

首页 > 解决方案 > ngFor 中的 Kendo Datepickers

angular - ngFor 中的 Kendo Datepickers

问题描述

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

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

标签： angularkendo-ui

解决方案

这应该修复您的代码：

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

推荐阅读