angular4 kendo-numerictextbox ngModel 双向数据绑定答案

【问题标题】：angular4 kendo-numerictextbox ngModel two way data bindingangular4 kendo-numerictextbox ngModel 双向数据绑定
【发布时间】：2018-04-10 13:10:30
【问题描述】：

以下只是示例。我需要动态进行多次计算。

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

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>

【问题讨论】：

标签： angular5 kendo-ui-angular2 angular2-ngmodel

【解决方案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;
    }
}

【讨论】：