Angular 2 - ContentEditable 2路綁定 - 第二個onBlur（）事件後的更新

Question

我有一個包含價格，數量和總數的表。我在價格和數量字段中添加了「contenteditable」屬性，我希望它在價格或數量發生變化時自動更新「總計」字段。 （我使用的改性CONTENTEDITABLE部件從this交）

<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() { 
    this.total = this.price * this.quantity; 
    } 

但是，在第二次執行onBlur之前，total不會更新。這是爲什麼？

這裏是一個plunker鏈接：父組件上

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