如何使用 Angular 2 中的打字稿从文本框中获取值

Question

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

@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;
  }}

原文由 ngopal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 @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

原文由 ttfreeman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

html：

  <input type="text" id="obj_id" >

ts > 读作：

  (<HTMLInputElement>document.getElementById(obj_id)).value

如果在 for 循环中涉及对象，则文本框将从对象字段值中获得 id，然后使用 [id] 而不是 id

 <input type="text" [id]="obj.field"  >

原文由 Nabin Kumar Khatiwada 发布，翻译遵循 CC BY-SA 4.0 许可协议