arithmetische Operationen mit onclick-Ereignis in Typoskript anzeigen

Question

Dies ist mein erster Versuch, ionische Rahmen zu lernen. Ich habe ein Projekt gestartet, in dem ich zwei Zahlen als Eingabe nehmen und die spezifische Operation wie Summe, Quadrat, Abteilung durch Knöpfe mit onclick Ereignis anzeigen möchte. .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 }}"); 

}

} 

Es zeigt nicht mir Ausgabe auf Klick-Taste. Ich habe auch eckige Bibliotheken importiert ... können Sie bitte helfen ..?

Answer 1

Code unten auf 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> 

dann tun dies auf component.ts

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

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