1

好吧，我正在学习 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 ? "spinner":"Log In arrow_forward" }}" 的按钮；

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

4

2 回答 2

2

试试这个 -

<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>
于 2017-03-25T05:31:02.120 回答
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>
于 2017-03-25T05:41:35.387 回答