如何根据各种值

时间:2017-10-18 09:16:04

标签: typescript ionic2

如何根据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>

1 个答案:

答案 0 :(得分: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>