在打字稿中使用onclick事件顯示算術運算

Question

這是我第一次學習離子框架。我已經開始了一個項目，我想以兩個數字作爲輸入，並使用onclick事件通過按鈕顯示特定操作，如總和，平方，除法。 的.html

<ion-content padding> 
<div ng-app=""> 

    <p>First Number: <input type="number" [(ngModel)]="p"/> </p> 

    <p>Second Number: <input type="number" [(ngModel)]="q" /> </p> 

</div> 
    <div> 
    <button t (click)='onAdd();'>Sum</button> 
    <button t (click)='onMul();'>Product</button> 
    <button t (click)='onSquare();'>Square</button> 
    <button t (click)='onDivide();'>Division</button> 
</div> 
</ion-content> 

.TS

export class HomePage { 

p:number =0; 

q:number =0; 

    constructor(public navCtrl: NavController) { 

}

onAdd(p:number,q:number){ 

console.log("sum={{ p + q }}") 

}

onMul(p:number,q:number){ 

console.log("mul={{ p * q }}"); 

}

onSquare(p:number,q:number){ 

console.log("square={{ p * p }},{{ q * q }}"); 

}

onDivide(p:number,q:number){ 

console.log("divide={{ p/q }}"); 

}

} 

它不顯示我的點擊按鈕輸出。我還導入了角庫...可以請你幫忙..？

Answer 1

下面的代碼在HTML

<p>First Number: <input type="number" [(ngModel)]="p"/> </p> 
    <p>Second Number: <input type="number" [(ngModel)]="q" /> </p> 
    <button (click)='onAdd()'>Sum</button> 
    <p>{{ result }}</p> 

然後做這個component.ts

result: number; 
    p: number = 0; 
    q: number = 0; 

    onAdd() { 
    this.result = this.p + this.q; 
    }