サーバー待機中に送信ボタンを表示しない（バインディングが機能していません）

Question

サーバーにデータを非同期で送信するAngular 2フォームがあります。ブラウザーがサーバーからの応答を待っている間にエンドユーザーに視覚的なフィードバックを提供する必要があるので、青い「送信」ボタンを灰色表示の「Please wait ...」ボタンに変更したいと思います。私は、これを行う最も簡単な方法は、2つのボタンがあり、もう一方が見えているときにそれを隠すことだと決めました。

私はちょうど私のモデルでこれを置くことができると思った：

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

しかし、両方のボタンが常に表示されているにかかわらず、値isPendingのがに設定されている：私のページで

isPending: boolean = false; 

そして、これ。

私は後に何を達成するために慣用方法ですか？

Answer 1

ただ、そうのよう*ngIfと[hidden]を置き換える：

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

問題は、ボタンタグにclassディレクティブは、実行時にhiddenディレクティブを上書きすること、です。

Plunker使用例のためにあなたの答えのrinukkusuため