Question

我有一张价格，数量和总数的表格。我在价格和数量字段中添加了“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（）函数。

  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

Angular 2 - ContentEditable 2路绑定 - 第二次onBlur（）事件后更新

1 个答案: