Angular 2 - ContentEditable 2 方式绑定 - 在第二个 onBlur() 事件后更新

Question

我有一个 table，其中包含价格、数量和总计。我在价格和数量字段中添加了一个 'contenteditable' 属性，我希望它在价格或数量发生变化时自动更新 'total' 字段。（我正在使用来自 this post 的修改后的 contenteditable 组件）

<table>
    <tr>
        <td>Price</td>
        <td>Quantity</td>
        <td>Total</td>
    </tr>
    <tr>
        <td (blur)='edit()' contenteditable='true' [(contenteditableModel)]='price'>{{price}}</td>
        <td (blur)='edit()' contenteditable='true' [(contenteditableModel)]='quantity'>{{quantity}}</td>
        <td>{{total}}</td>
    </tr>
</table>

在我的 app.ts 中，我定义了一个 edit() 函数来进行计算。

  edit() {
    this.total = this.price * this.quantity;
  }

但是，在第二次执行 onBlur 之前，total 不会更新。这是为什么？

这是一个笨蛋link:

https://plnkr.co/edit/1cxQLXZTRmCTPCdFUUk6

Answer 1

父组件上的模糊处理程序比 ContenteditableModel 指令中的处理程序执行得早。

您需要在执行子处理程序后更新总数：

 <td [contenteditableModel]="price" 
     (contenteditableModelChange)="price = $event; updateTotal()"
     contenteditable="true">{{price}}</td>
 <td [contenteditableModel]="quantity"
     (contenteditableModelChange)="quantity = $event; updateTotal()" 
     contenteditable="true">{{quantity}}</td>

Plunker

Angular 2 - ContentEditable 2 方式绑定 - 在第二个 onBlur() 事件后更新

Angular 2 - ContentEditable 2 way binding - Updates after second onBlur() event

data-binding

contenteditable

onblur

angular