如何从文本框使用打字稿在角2

我是一个初学者到angular2 /打字稿我从两个文本框试图获取数和增加这两个数字中获得价值，并使用插值如何从文本框使用打字稿在角2

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

来源

2017-04-14 ngopal

https://angular.io/docs/ts/latest/guide/user- input.html – echonax

绑定到表单元素是几乎所有角度教程的开始部分所涵盖的内容，包括主角2站点上的许多操作指南和教程。按照链接@echonax张贴，看看你是否可以弄明白。 – Igor

你有没有读过角度的东西？ – Aravind

HTML

<p>first number:<input type="text" id="num1" [(ngModel)] = "value" ></p> 
<p>second number:<input type ="text1" id="num2" [(ngModel)] = "value1"></p> 
<h1> {{value + value1}}</h1>

组件类

export class AppComponent {}

来源

2017-04-14 11:06:39 ranjeet8082

谢谢你的答案，但使用按钮事件如何我们可以这样做 – ngopal

在你的html <按钮中添加一个按钮（click）=“addValues（）”>添加。在类中添加addValues函数。（）{ this.result = this.value + this.value1; } 用h1标记中的结果替换值+值1。 – ranjeet8082

还在组件类中声明值，值1和结果变量。 – ranjeet8082

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

export class AppComponent { 
    name = 'Angular'; 

    constructor() { 
    } 

    onSubmit(f: NgForm) { 
     console.log(f.form.value); 
    } 
}

来源

2017-04-14 10:55:15

显示结果

HTML

<p>first number:<input type="number" [(ngModel)]='a'></p> 
<p>second number:<input type ="number" [(ngModel)]='b'></p> 
<h1>{{a + b}}</h1>

组件

export class AppComponent 
    { 
a: number = 0; //set default value as 0 
b: number = 0; 

}

来源

2017-04-14 11:04:27

问题将是，如果a = 4和b = 5你想要总和，因此在h1它应该显示9，但实际上是要显示45 –

如果你不使用ngModel：

var num1= ((document.getElementById("num1") as HTMLInputElement).value); 
var num2= ((document.getElementById("num2") as HTMLInputElement).value); 
var result=parseInt(num1)+parseInt(num2); 
console.log(result);

来源

2017-11-17 11:10:12

如何从文本框使用打字稿在角2

回答

相关问题