如何在角度2中使用打字稿从文本框获取值 [英] how to get value from textbox using typescript in angular 2

问题描述

我是angular2/Typescript的初学者，我正在尝试从两个文本框中获取数字，然后将两个数字相加并使用插值显示结果

I am a beginner to angular2 / typescript I'm trying get numbers from two textboxes and adding both numbers and display the result using interpolation

@Component({
selector: 'my-app',
template: 
`<h1>Hello {{name}}</h1>
<h1>{{D}}</h1>
 <form>
  <p>first number:<input type="text" id="num1"></p>
  <p>second number:<input type ="text1" id="num2"></p>
  <h1> {{result}}</h1>
  </form>
   <test-app></test-app>`
  })

  export class AppComponent 
  { 
 name = 'Angular'; 
 value : number;value1 : number;result:number;
  constructor(value : number,value1 : number,result:number)
  {

  this.value = parseFloat
  ((document.getElementById("text") as HTMLInputElement).value);
  this.value1 = parseFloat((document.getElementById("text1") 
  as HTMLInputElement).value);
  this.result=this.value+this.value1;
  }}

推荐答案

最简单的方法是使用模板引用变量:

The easiest way is to use template reference variable:

@Component({
  selector: 'app-little-tour',
  template: `
    <input #newHero > 
    <button (click)="addHero(newHero.value)">Add</button>
})

export class LittleTourComponent {
  addHero(newHero: string) {
    console.log(newHero)
  }
}

可以在此处找到有关Angular用户输入的完整指南: https://angular.io/guide/user-input

A complete guide for User Input in Angular can be found here: https://angular.io/guide/user-input

这篇关于如何在角度2中使用打字稿从文本框获取值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！