如何根据各种值显示按钮

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

可以使用*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>