Angular 2：使用材料图标设置带有条件内容的按钮答案

【问题标题】：Angular 2: Setting a button with conditional content with material-iconsAngular 2：使用材料图标设置带有条件内容的按钮
【发布时间】：2017-08-18 04:19:03
【问题描述】：

嗯，我正在学习 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 添加到我的可能结果中？

【问题讨论】：

标签： html angular variables google-material-icons

【解决方案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>

【讨论】：

它可以工作，与 *ngIf 相同。但我想知道是否有某种方法可以只有一个按钮。顺便谢谢，我不知道隐藏的功能。
1 个按钮是什么意思？请稍微解释一下
使用此方法，您将创建两个按钮，如果布尔值为假，则显示一个，如果布尔值为真，则显示另一个。我想知道它是否可以只用一个。
让我更新答案。还有比ngSwitch更干净的方式
当然，ngSwitch 工作得很好，但如果你说有一些更清洁的方法。我很想知道。

【解决方案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>

【讨论】：