Question

很抱歉，如果这听起来非常明显，但我是Ionic 2 / Angular 2的新手。提交表单后，我需要更新按钮文本并单击事件，即：

首先点击按钮=提交表单+更新按钮文字到“下一步”
第二次点击按钮=触发goToNext（）

我设法更新了按钮文本但没有更新click事件（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答案或类似的内容：

<{1>}文件中的

：

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

<{1>}文件中的

：

ts

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

2 个答案: