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

Answer 1

如果你没有使用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);

Answer 2

HTML

r[1][p+o[p]] = true

组件类

<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>

Answer 3

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;

}

Answer 4

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

@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

Answer 5

app.component.html

<div>
      <input type=`text` [(ngModel)]=`userName` placeholder=`user name` class=`user_id_text`>
      </div>
      <div>
      <input type=`password` [(ngModel)]=`password` placeholder=`password` class=`user_id_password`>
      </div>
      <div>
      <input type=`submit` value=`Login` (click)=`registeredUser($event)`>
      </div>

app.component.ts

export class AppComponent implements OnInit{
userName =``;
password = ``;

ngOnInit(){
  console.log(this.userName+` password -`+this.password);
}
registeredUser(){
 let {userName,password} = this;

 if(userName==`ssss` && password == `ssss`){
    console.log(userName+` password -`+password);
 }
}

} 说明-带有[（）]的ngModel是双向绑定。用户界面中的值始终会同步回到您班级中的域模型

Answer 6

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

Answer 7

html：

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

ts>读取为：

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

如果涉及对象（例如for循环），则应给出文本框来自对象字段值的ID，然后使用 [id] 代替 id

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

如何使用angular 2中的typescript从文本框中获取值

7 个答案: