如何從文本框使用打字稿在角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

回答

相關問題