角度 2:设置带有材质图标的条件内容的按钮

Question

好吧，我正在学习 angular 2，我从开发一个登录表单开始，我在制作带有条件内容的按钮时遇到了麻烦。

此补码模板的代码如下所示：

<button class="login-button" (click)="checkData()"> 
{{isLoading ? "loading...":"Log In" }} 
</button>

它检查 isLoading 布尔值，并将内部 html 条件设置为此布尔值。右？

是的，这呈现得很好，一个有条件内容的按钮是"加载..."如果 isLoading 为真，则为"登录"，如果为假。

但是，如果要在按钮内添加一些谷歌材料图标，它将停止工作：

<button class="login-button" (click)="checkData()"> 
{{isLoading ? "<i class='material-icons'>spinner</i>":"Log In <i class='material-icons'>arrow_forward</i>" }} 
</button>

它只是不起作用。它呈现一个内容为"{{isLoading ？微调器"："登录arrow_forward" }}";

如何将图标的 html 添加到我可能的结果中？

Answer 1

试试这个 -

<button class="login-button" [disabled]="isLoading" (click)="checkData()"> 
   <i [hidden]="!isLoading" class='material-icons'>spinner</i>
   <span [hidden]="isLoading">Log In <i class='material-icons'>arrow_forward</i></span>
</button>

Answer 2

您可以使用

ngSwitch

<button class="login-button" (click)="checkData()" [ngSwitch]="isLoading"> 
  <i class='material-icons' *ngSwitchCase="true">spinner</i>
  <span *ngSwitchCase="false">
    Log In <i class='material-icons'>arrow_forward</i>
  </span>
</button>