Angular 2：使用 material-icons 设置带有条件内容的按钮

Question

嗯，我正在学习 angular 2，我从开发登录表单开始，但我在制作带有条件内容的按钮时遇到了问题。

此补充模板的代码如下：

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

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

是的，这呈现得很好，如果 isLoading 为真，则按钮的条件内容为 "loading..."，如果为假，则为 "Log In"。

但是如果想在按钮内添加一些 google material 图标，它将停止工作：

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

只是行不通。它呈现一个内容为“{{isLoading ? "spinner":"Log In 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>

Angular 2：使用 material-icons 设置带有条件内容的按钮

Angular 2: Setting a button with conditional content with material-icons

html

variables

google-material-icons

angular