首页 文章

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

提问于
浏览 次
1

我有一个包含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
    }
javascript html angular angular2-forms

1 回答

  • 0

    您应该使用将执行和更新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 = ... }
    回复于

相关问题