在等待服务器时隐藏提交按钮（绑定不起作用？）

Question

我有一个Angular 2表单，它以异步方式向服务器提交数据。我需要向终端用户提供一些视觉反馈，同时他们的浏览器正在等待从服务器收到回复，所以我想改变蓝色提交＆＃39;按钮变为灰色＆＃39;请稍等...＆＃39;按钮。我决定最简单的方法是使用两个按钮，当另一个可见时隐藏一个按钮。

我以为我可以把它放在我的模型中：

-webkit-tap-highlight-color:transparent

这在我的页面上：

isPending: boolean = false;

但无论isPending值设置为。

，两个按钮始终可见

完成我之后的事情的惯用方法是什么？

Answer 1

只需将[hidden]替换为*ngIf，如下所示：

<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例如用法