Angular 2:使用ngModel将2个数字相加

时间:2017-05-19 17:28:17

标签: html angular typescript

我正在尝试将ngModel变量与另一个变量相加并将结果显示为插值但我没有看到动态更新的结果。

这是我的输入文字字段:

<input type="text" [(ngModel)]='downpayment1' class="form-control" placeholder="Option 1 Down Payment (%)">

打字稿代码如下所示:

  downpayment1 = 0;
  result = this.downpayment1 + 20;

更改downpayment1输入也应该更改{{result}}但不会发生。使用Angular1评估数值表达式要容易得多,但我找不到Angular2的任何示例。我在这做错了什么?

1 个答案:

答案 0 :(得分:2)

如果我理解你想要达到的目的是:

  • 显示 ngModel值汇总并带有一些固定值
  • 保持ngModel值不受影响此固定值...

然后那将是我的答案

@Component({
    selector: 'my-app',
    template: `
    <h1>Summing example</h1>
    <h2>Fixed value {{fixedValue}}</h2>
    <input type="number" [(ngModel)]='downpayment1' class="form-control" placeholder="Option 1 Down Payment (%)">

    <h2>Sum : {{ fixedValue + downpayment1 }}</h2>
    `
})
export class AppComponent {
    public fixedValue: number = 20;
    public downpayment1: number = 0;
}