私は angular2 / typescript の初心者です。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;
}}
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;
}
@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);
}
}