angular4 kendo-numerictextbox ngModel 双向数据绑定

Question

下面一个只是示例。我需要动态地进行多次计算。

如果我更改 units/price 文本框中的值，总值不会更新。如何使用 ngModel 进行计算？我们应该使用 valueChange 事件吗？ Angular4不自动更新？

JSON:

 items:[{units:10;price:20, total:0},
    {units:20;price:23, total:0}]

控制器：

 pageLoad(){
       for(var i=0; i<items.length; i++){
          items[i].total = items[i].units*items[i].price
       }
}

HTML:

 <div *ngFor="let item of items; let i=index">
     <kendo-numerictextbox [(ngModel)]="item.units" />
    <kendo-numerictextbox [(ngModel)]="item.price" />
    <kendo-numerictextbox [readOnly]="true" [(ngModel)]="item.total" />
 </div>

Answer 1

这里正在工作Plunkr。

代码：

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

@Component({
    selector: 'my-app',
    template: `
        <div *ngFor="let item of items; let i=index">
          <div>{{item | json}}</div>
          <div>
            <kendo-numerictextbox [(ngModel)]="item.units"></kendo-numerictextbox>
            <kendo-numerictextbox [(ngModel)]="item.price"></kendo-numerictextbox>
            <kendo-numerictextbox [readonly]="true" [value]="getTotal(item)"></kendo-numerictextbox>
          </div>
        </div>
    `
})

export class AppComponent 
{
    public items = [{units:10,price:20},{units:20,price:23}];

    public getTotal(item)
    {
      return item.units*item.price;
    }
}

angular4 kendo-numerictextbox ngModel 双向数据绑定

angular4 kendo-numerictextbox ngModel two way data binding

angular2-ngmodel

kendo-ui-angular2

angular5