각도 2 - ContentEditable 2 way 바인딩 - 두 번째 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가 두 번째 실행될 때까지 총계가 업데이트되지 않습니다. 왜 그런가요? 상위 구성 요소에

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

:

당신은 아이 핸들러를 실행 한 후 총을 업데이트해야