Soy un principiante en angular2/mecanografiado. Estoy tratando de obtener números de dos cuadros de texto y agregar ambos números y mostrar el resultado mediante interpolación.
@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; }}
La forma más fácil es usar la variable de referencia de la plantilla:
@Component({ selector: 'app-little-tour', template: ` <input #newHero > <button (click)="addHero(newHero.value)">Add</button> }) export class LittleTourComponent { addHero(newHero: string) { console.log(newHero) } }
Puede encontrar una guía completa para la entrada de usuario en Angular aquí: https://angular.io/guide/user-input
si obtiene sin usar 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);
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>
Clase de componente
export class AppComponent {}