Angular 2 - ContentEditable 2-Wege-Bindung - Updates nach dem zweiten onBlur() Ereignis

Question

Ich habe eine Tabelle, die Preis, Menge und Summe hat. Ich habe den Feldern Preis und Menge ein Attribut 'contenteditable' hinzugefügt und möchte, dass das Feld 'total' automatisch aktualisiert wird, wenn sich entweder der Preis oder die Menge geändert hat. (Ich bin eine modifizierte contenteditable Komponente aus this Post mit)

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

In meinem app.ts habe ich bearbeitet() Funktion definiert, die die Berechnung der Fall ist.

Gesamt wird jedoch nicht aktualisiert, bis die onBlur ein zweites Mal ausgeführt wird. Warum das?

Hier ist ein Plunker Link:

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

Answer 1

Ihre Unschärfe-Handler auf der übergeordneten Komponente wird früher als der Handler innerhalb ContenteditableModel Richtlinie ausgeführt.

Sie müssen die Gesamt aktualisieren, nachdem Kind-Handler ausführen:

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

Plunker