さまざまな値に応じてボタンを表示する方法

Question

resultに保存されている値に基づいてhtmlファイルのボタンを表示するにはどうすればいいですか？

page1.ts

class page1 { 
    let result: string; //possible values of result can be 'additon', 
         //'multiply','divide'. 

    constructor(public serviceClass : ServiceClass){ 
    this.initialzie(); 
    } 

    additon(){ 
     this.result = 'addition'; 
    } 

    modulus(){ 
    //logic for this function. 
    } 

    initialize(){ 
    this.result = this.serviceClass.someFunction(); 
    } 
    } 

page1.html

//headers and title already implemented. 

// buttons to implement now. 
//**condition**: The below button is only shown on the basis of the value 
        //populated in the result variable in .ts class. 

<div> //if result = 'multiply, 'divide' then show this button.How to 
        //implement this? 
<button ion-button (click)="addition()">ADD ME</button> 
</div> 

<div> //if result = 'addition' then show this button.How to implement this? 
<button ion-button (click)="modulus()">Modulus</button> 
</div> 

Answer 1

私は、結果の値が取得MEに追加]ボタンをクリックしたときには、 `*ngIf

<div *ngIf="result == 'multiply' || result == 'divide' "> 
<button ion-button (click)="addition()">ADD ME</button> 
</div> 


<div *ngIf="result == 'addition'"> 
<button ion-button (click)="modulus()">Modulus</button> 
</div>