强制更新 angular 中的属性绑定 2

Question

考虑以下组件

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);
  }

}

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

运行 plunker 中的示例：http://plnkr.co/edit/Vyi4RKladslrdZslZQhm

有没有人有解决这个问题的好方法？

Answer 1

这是Answer你想要完成的吗？？？？

//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);
  }
}

强制更新 angular 中的属性绑定 2

Force update of a property binding in angular 2

javascript

data-binding

angular2-forms

angular2-template

angular

强制更新 angular 中的 属性 绑定 2

Force update of a property binding in angular 2

javascript

data-binding

angular2-forms

angular2-template

angular

强制更新 angular 中的属性绑定 2