Угловая 2 - ContentEditable 2-х сторонняя привязка - Обновления после второго события onBlur()

Question

У меня есть таблица, в которой есть цена, количество и сумма. Я добавил атрибут «contenteditable» в поля цены и количества, и я хочу, чтобы он автоматически обновлял поле «total», когда изменилась либо цена, либо количество. (Я использую модифицированный 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 не будет выполнен во второй раз. Почему это?

Вот ссылка 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