如何使用动态输入字段在组件中设置数据？（角度 2）答案

【问题标题】：How do i set data in my component with a dynamic input field? (Angular 2)如何使用动态输入字段在组件中设置数据？（角度 2）
【发布时间】：2017-04-06 01:10:14
【问题描述】：

我有一个包含 3 个字段的页面，我正在计算一个人的 BMI。我为此设置了三个输入字段：体重、身高和 bmi，用户可以在其中输入身高和体重输入字段，然后自动计算 BMI。

我的身高和体重字段都附加了一个 ngModel，这可以将数据正确保存在我在组件中创建的模型中：

<input [(ngModel)]="masterdataModel.weight" name="weight" type="text" 
       class="form-control" id="input05"
       placeholder="75" formControlName="weight">

<input [(ngModel)]="masterdataModel.height" name="height" type="text" 
       class="form-control" id="input04"
       placeholder="185"  formControlName="height">

在 BMI 字段中，我在“值”标签中进行计算：

<input [(ngModel)]="masterdataModel.bmi"
       value="{{masterdataModel.weight/(masterdataModel.height/100*masterdataModel.height/100) | number: '1.1-1'}}"
       type="text" class="form-control form-control-rounded" id="input06" 
       style="text-align: center;" formControlName="bmi" placeholder="BMI" name="bmi">

在“值”标签中使用公式会更改输入字段中的值，但不会更新 ngModel。我尝试在该字段上添加 (ngModelChange)，但它也没有被调用。

我该如何正确解决这个问题？很感谢任何形式的帮助。我的组件中的模型如下所示：

this.masterdataModel = {
      date_of_visit: null,
      date_of_birth: null,
      date_of_pbc_diagnosis: null,
      gender: null,
      height: null,
      weight: null,
      bmi: null,
      ama_positive: null
    }

【问题讨论】：

标签： javascript html angular angular2-forms

【解决方案1】：

您应该使用将执行和更新 BMI 值计算的函数来聆听体重和身高模型的变化，因此在 BMI 输入中您的字体需要再使用 value={{}} 并且每次值都会更新变化

例子

<input [(ngModel)]="mymodel.height" (ngModelChange)="updateBMI($event)"> <input [(ngModel)]="mymodel.weight" (ngModelChange)="updateBMI($event)"> <input [(ngModel)]="mymodel.BMI"> 在你的打字稿组件中

public updateBMI($event){ this.mymodel.BMI = ... }

【讨论】：