Typescript 如何根据不同的值显示按钮

如何根据

结果中存储的值在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>

//标题和标题已实现。
//现在执行的按钮。
//**条件**：以下按钮仅根据值显示
//在.ts类的结果变量中填充。
//如果结果='乘''除'，则显示此按钮
//实施这个？
加我
//如果结果='addition'，则显示此按钮。如何实现此操作？
模数

您可以使用

*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>

加我
模数

当我单击“添加我”按钮时，结果get

addition的值

但该按钮不会替换为

模数

当我单击addition（）时，您的添加函数在哪里？然后它会以某种方式更新

结果=addition

的值，因此，当值更改为

addition

时，按钮应更改为

module

。这是我需要实现的必要逻辑。addition（）也位于.ts文件中。