离子2更新按钮文本和事件单击

Question

对不起，如果这听起来很明显，但是我是Ionic 2/angular 2的新手。

• 首先单击按钮=提交表单 更新按钮文本" next"

• 第二次单击按钮= trigger gotonext（）

我设法更新了按钮文本，但没有更新点击事件（to gotOnext（））。

.html

 <form (ngSubmit)="logForm(i)">
        <ion-item>
           <ion-input type="text" [(ngModel)]="form.userinput[i]" name="userinput[i]"></ion-input>
        </ion-item>
        <button ion-button block type="submit" (click)="setNext($event.target, 'Next')">Check</button>
 </form>

.ts

setNext(element, text){
    element.textContent = 'Next';
 }
goToNext(){
// go to Next Page
}

Answer 1

理想情况下，您会更改设计，以保持一个存储'控制器'状态的变量。例如存储Pagenumber。然后根据您的页面行事不同。所以我建议更改设计。

但是，为了在没有重大更改的情况下回答您当前的问题，您可以像绑定文本一样动态绑定处理程序。然后在第一个处理程序中，更改处理程序以进行下一次单击。处理程序和文本的默认值将决定最初使用哪个值

    handler = this.setNext;
    text = 'first text';
    setNext(){
      alert('handler1 called');
      this.handler = this.goToNext;
      this.text = 'other text';
    }
  goToNext(){
    alert('second called');
    // go to Next Page
  }

，在您的html中，您会像

一样

  <button ion-button block type="submit" (click)="handler()">{{text}}</button>

Answer 2

您可以使用n00b答案或类似的东西：

在html文件中：

<button ion-button block type="submit" (click)="check()">{{btn_txt}}</button>

在ts文件中：

btn_txt = 'Check';
check() {
   if (this.btn_txt == 'Check') {
      //do some logic
      this.btn_txt = 'Next';
   } else {
      console.log('go to next page');
   }
}