Javascript 在angular 2中强制更新属性绑定

考虑以下组件

import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h3>Input with two decimals</h3>
      <input type="text" 
             [value]="formattedN" 
             (change)="nChanged($event.target.value)"/>
    </div>
  `,
  directives: []
})
export class App {

  private n: number = 0;
  private formattedN: string = "0.00"

  public nChanged(value) {
    this.n = parseFloat(value);
    this.formattedN = this.n.toFixed(2);
  }

}

从'angular2/core'导入{Component}
@组成部分({
选择器：“我的应用程序”，
提供者：[]，
模板：`
两位小数的输入
`,
指令：[]
})
导出类应用程序{
私有n：数字=0；
私有格式DN:string=“0.00”
公共n更改（值）{
此.n=解析浮点（值）；
this.formattedN=this.n.toFixed（2）；
}
}

输入应始终是一个带两个小数的数字。然而，情况并非总是如此。尝试删除最后一个零，该字段不会更改为0.00，这正是我想要的。我理解它不起作用，因为formattedN值没有更新，这意味着属性绑定没有更新，因此输入的值没有更新

在plunker中运行示例：

有人有解决这个问题的好办法吗？

这就是你想要实现的吗

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <input type="text" [(ngModel)]="formattedN" (change)="nChanged($event.target.value)"/>
    </div>
  `,
  directives: []
})
export class App {

  private n: number = 0;
  private formattedN: string = "0.00"

  constructor() {
    this.name = 'Angular2'
  }

  public nChanged(value) {
    console.log(value);
    this.n = parseFloat(value);
    console.log(this.n);
    this.formattedN = this.n.toFixed(2)
    console.log(this.formattedN);
  }
}

//我们的根应用程序组件
从'angular2/core'导入{Component}
@组成部分({
选择器：“我的应用程序”，
提供者：[]，
模板：`
`,
指令：[]
})
导出类应用程序{
私有n：数字=0；
私有格式DN:string=“0.00”
构造函数（）{
this.name='Angular2'
}
公共n更改（值）{
console.log（值）；
此.n=解析浮点（值）；
console.log（this.n）；
this.formattedN=this.n.toFixed（2）
console.log（this.formattedN）；
}
}

似乎与@GünterZöchbauer相关，因为我的输入是文本输入。@SimonHawesome并不能真正帮助我为输入提供我想要的行为。这会导致并发问题吗？我怎么知道[（ngModel）]或（change）是否首先被调用？这可能是不可能的，因为ngModel是在输入事件上启动的，而最后一个输入事件总是在更改事件之前启动的。你这是什么意思？您能简要介绍一下吗？首先触发

change

事件，它会更改

formattedN

的值。一旦值发生更改，

angular2

就会使用

[（ngModel）]-双向绑定语法更新UI。每当输入发生更改时，就会触发输入事件，这是ngModel用来更新绑定的
[（ngModel）]=“formattedN”
相当于
[值]=“formattedN”（输入）=“formattedN=$event.target.value”
。当输入失去焦点时，会触发更改事件，此时模型已经因为ngModel而更改，因此formattedN的值会更改，这会导致使用ngModel更新属性绑定。