javascript - 如何使用动态输入字段在组件中设置数据？ ( Angular 2)

Question

我有一个包含 3 个字段的页面，我正在其中计算一个人的 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">

将公式放在“value”标记中会更改输入字段中的值，但不会更新 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
    }

Answer 1

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

示例

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

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