Hide Submit Button während des Wartens auf Server (Bindung funktioniert nicht?)

Question

Ich habe ein Angular 2 Formular, das Daten asynchron an den Server übermittelt. Ich muss den Endbenutzern ein gewisses visuelles Feedback geben, während ihr Browser darauf wartet, vom Server zu hören. Daher möchte ich die blaue Schaltfläche "Senden" in eine ausgegraute Schaltfläche "Bitte warten ..." ändern. Ich entschied, dass der einfachste Weg das zu tun wäre, zwei Knöpfe zu haben und einen zu verstecken, wenn der andere sichtbar ist.

Ich dachte, ich könnte dies nur in meinem Modell setzen:

isPending: boolean = false; 

Und das auf meiner Seite:

<button [hidden]="!isPending" type="submit" class="btn btn-primary">Register</button> 
<button [hidden]="isPending" class="btn btn-primary" disabled>Please wait...</button> 

Aber beide Tasten sind immer sichtbar, unabhängig von dem Wert IsPending wird auf .

Was ist der idiomatische Weg, um das zu erreichen, wonach ich suche?

Answer 1

Ersetzen Sie einfach [hidden] mit *ngIf wie so:

<button *ngIf="!isPending" type="submit" class="btn btn-primary">Register</button> 
<button *ngIf="isPending" class="btn btn-primary" disabled>Please wait...</button> 

Das Problem ist, dass die class Richtlinien in Ihrer Schaltfläche Tags, um die hidden Direktive zur Laufzeit außer Kraft setzen.

Plunker zum Beispiel Nutzung