javascript - 单击后从输入中获取值并计算它 - Angular 5

Question

我想编写一个函数，从两个输入获取两个值并计算 BMI( body 质量指数)之类的东西。我的 HTML 文件:

<div class="input-group mb-3 weight-div col-6">
    <div class="input-group-prepend">
        <span class="input-group-text">Weight</span>
    </div>
    <input ng-model="weight" type="text" class="form-control" placeholder="[kg]" aria-label="Waga[kg]" aria-describedby="basic-addon1">
</div>


<div class="input-group mb-3 growth-div col-6">
    <div class="input-group-prepend">
        <span class="input-group-text">Growth</span>
    </div>
    <input ng-model="growth" type="text" class="form-control" placeholder="[m]" aria-label="Wzrost[m]" aria-describedby="basic-addon1">
</div>

<button (click)="calculate()" type="button" class="btn btn-primary btn-sm ml-3">Large button</button>

<div class="alert alert-dark" id="result" role="alert">
</div>

我的 TS 文件:

import { Component, OnInit } from '@angular/core';
import { NgModel } from '@angular/forms';

@Component({
    selector: 'app-inputs',
    templateUrl: './inputs.component.html',
    styleUrls: ['./inputs.component.css'],

})

export class InputsComponent implements OnInit {

    constructor() { }

    ngOnInit() {
    }

    calculate() {
    }
}

我应该在函数 calculate () 中写什么来查看从体重和生长输入中获取值，以及如何将例如值从变量 bmi 导出到 div id="result"？感谢帮助!

Answer 1

利用 Angular 与 [(ngModel)] 的双向数据绑定(bind)。这样你甚至不需要计算功能，就可以实时得到计算预览。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template:`
  <input [(ngModel)]="mass" placeholder="mass" />
  <input [(ngModel)]="height" placeholder="height" />
  <div *ngIf="mass && height"> {{ bmi }} </div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  mass = 0;
  height = 0;

  get bmi() {
    return this.mass / Math.pow(this.height, 2);
  }
}

Live demo