Angular4中Kendo-NumericTextBox双向绑定动态计算问题

嘿，这个问题我之前也碰到过！你现在的问题在于pageLoad()只在页面初始化的时候计算了一次total值，但当用户修改units或price输入框时，Angular并不会自动帮你重新计算total——因为它不知道total和units/price的依赖关系呀。下面给你两种靠谱的解决方案：

方案一：用ngModelChange事件触发计算 #

这种方法最直接，每次输入框的值变化时，手动调用计算方法更新对应item的total。

控制器代码修改 #

先添加一个专门计算单条item total的方法：

// 假设你的组件类里已经有items数组
calculateTotal(item: any) {
  // 可以在这里加额外的校验逻辑，比如防止负数、非数字等
  item.total = item.units * item.price;
}

pageLoad() {
  // 初始化时先计算一次所有total
  this.items.forEach(item => this.calculateTotal(item));
}

HTML代码修改 #

在每个绑定ngModel的输入框上添加ngModelChange事件：

<div *ngFor="let item of items; let i=index">
  <input 
    [(ngModel)]="item.units" 
    (ngModelChange)="calculateTotal(item)" 
    type="number"
    placeholder="Units"
  >
  <input 
    [(ngModel)]="item.price" 
    (ngModelChange)="calculateTotal(item)" 
    type="number"
    placeholder="Price"
  >
  <span>Total: {{ item.total }}</span>
</div>

这样每次用户修改units或price时，都会触发calculateTotal方法，实时更新total值。

方案二：用Getter属性实现自动计算 #

如果不想手动绑定事件，可以给每个item的total设置为Getter属性，这样每次访问total时都会自动计算最新值。

控制器代码修改 #

首先定义一个Item接口（可选，但更规范），然后在初始化items时给每个对象添加Getter：

interface Item {
  units: number;
  price: number;
  readonly total: number;
}

// 组件类中的代码
items: Item[] = [];

pageLoad() {
  const rawItems = [{units:10, price:20}, {units:20, price:23}];
  this.items = rawItems.map(rawItem => {
    return {
      units: rawItem.units,
      price: rawItem.price,
      // Getter属性，每次访问都会重新计算
      get total(): number {
        return this.units * this.price;
      }
    };
  });
}

HTML代码修改 #

HTML里不需要额外事件，直接使用total即可：

<div *ngFor="let item of items; let i=index">
  <input [(ngModel)]="item.units" type="number" placeholder="Units">
  <input [(ngModel)]="item.price" type="number" placeholder="Price">
  <span>Total: {{ item.total }}</span>
</div>

这种方式更简洁，Angular的变化检测会在units或price变化时，自动重新获取total的最新值。

为什么Angular不会自动更新？ #

Angular的变化检测会监听模板中绑定的属性变化，但你最初的代码里total是一个静态赋值的属性，初始化后没有被修改过，所以变化检测不会主动更新它。上面两种方法，要么手动触发修改total，要么让total成为依赖于units/price的动态属性，这样才能实现实时更新。

内容的提问来源于stack exchange，提问作者user3194721