Ionic 2 Aktualisieren-Knopf Text und Ereignis auf Click

Question

Sorry, wenn dies sehr offensichtlich klingt, aber ich bin neu in Ionic 2/Schräg 2. Auf ein Formular abgeschickt wird, muß ich auf den Button Text aktualisieren und Ereignis klicken, das heißt:

• ersten Klick auf den Button = einreichen Form + Update-Button Text "Next"

• zweiter Klick auf die Schaltfläche = Auslöser goToNext()

ich schaffte es auf den Button Text zu aktualisieren aber nicht AKTUALISIER Das Click-Ereignis (zu 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

Im Idealfall ein wenig ändern Sie Ihr Design eine Variable zu halten, die Status Ihres 'Controller' speichert. z.B. speichert Seitenzahl. und verhalten sich dann je nach der Seite, auf der Sie sich befinden. Ich schlage also vor, das Design etwas zu ändern.

Um jedoch Ihre aktuelle Frage ohne größere Änderungen zu beantworten, können Sie den Handler auf dieselbe Weise dynamisch binden, wie Sie den Text binden. Ändern Sie dann im ersten Handler den Handler für den nächsten Klick. die Standardwerte für Handler und Text wird entscheiden, welches die ursprünglich

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 
    } 

und Sie in Ihrem HTML gehen wie

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

Answer 2

verwendet gehen können Sie n00b Antwort oder so etwas wie folgt verwenden:

in html Datei:

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

in ts Datei:

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