angular 2'de typescript kullanarak textbox'tan değer nasıl alınır

Angular2 / typescript'e yeni başlayan biriyim, iki metin kutusundan sayıları almaya ve her iki sayıyı da eklemeye ve interpolasyon kullanarak sonucu görüntülemeye çalışıyorum

@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
Edited question 2017ööp56öö10 Nisan 2017 в 10:56
Programlama
angular typescript
2017ööp47öö10 Nisan 2017 в 10:47
3 görünümler

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>

Bileşen sınıfı

 export class AppComponent {}
Yorumlar (3)

HTML

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

Bileşen

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

}
Sreeragh A R
Edited answer 2017ööp10öö11 Nisan 2017 в 11:10
Yorumlar (1)
 
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>

      <p>first number:<input type="text" ngModel name="num1" id="num1"></p>
    <p>second number:<input type="text" ngModel name="num2" id="num2"></p>

`
  })

export class AppComponent {
  name = 'Angular';

  constructor() {
  }

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