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

Question

我有一个包含3个字段的页面，我在计算人员BMI。我有三个输入字段：weight，height和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字段中，我在'value'标签中进行计算：

<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输入之后您需要再使用值= {{}}并且每次更新值时都会更新变化

实施例

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

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