角2 - ContentEditable 2ウェイバインド - 2回目のonBlur（）イベントの後の更新

Question

価格、数量、合計のテーブルがあります。価格と数量フィールドに「contenteditable」属性を追加しました。価格または数量が変更されたときに、「合計」フィールドを自動的に更新します。私app.tsで

<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> 

を（私はthisポストから変更のcontentEditableコンポーネントを使用しています）、私は編集（）関数の計算を行うように定義しています。

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

ただし、onBlurが2回実行されるまで、合計は更新されません。何故ですか？親コンポーネントの

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

Answer 1

あなたのぼかしハンドラがContenteditableModelディレクティブ内のハンドラよりも先に実行されます。ここでは

はplunkerリンクです。

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

Plunker

：あなたは子供のハンドラを実行した後に、合計を更新する必要が