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

嗯，我正在学习angular 2，我从开发一个登录表单开始，我很难用条件内容创建一个按钮

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

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

{{正在加载？“正在加载…”：“登录”}

它检查isLoading bool，并将内部html in条件设置为该bool值。对吧?

是的，这会很好地呈现一个按钮，如果isLoading为true，则显示“loading…”的条件内容，如果isLoading为false，则显示“Log In”

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

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

{{isLoading？“微调器”：“登录箭头向前”}

它就是不起作用。它呈现一个内容为“{isLoading？”微调器的按钮：“登录箭头_forward”}”

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

试试这个-

<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>

纺纱机
按箭头键向前登录

试试这个-

<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>

纺纱机
按箭头键向前登录

您可以使用

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>

纺纱机
按箭头键向前登录

您可以使用

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>

纺纱机
按箭头键向前登录

它的工作原理与*ngIf相同。但我想知道是否有办法只按一个按钮。顺便说一下，我不知道隐藏的功能。你说的1个按钮是什么意思？请解释一下，使用这种方法，您将创建两个按钮，如果布尔值为false，则显示一个按钮，如果布尔值为true，则显示另一个按钮。我想知道是否只能用一个。让我更新答案。有一种比ngSwitch更干净的方法当然，ngSwitch在任何方面都可以正常工作，但如果你说有更干净的方法。我是伊格，我知道。这很有效，和*ngIf一样。但我想知道是否有办法只按一个按钮。顺便说一下，我不知道隐藏的功能。你说的1个按钮是什么意思？请解释一下，使用这种方法，您将创建两个按钮，如果布尔值为false，则显示一个按钮，如果布尔值为true，则显示另一个按钮。我想知道是否只能用一个。让我更新答案。有一种比ngSwitch更干净的方法当然，ngSwitch在任何方面都可以正常工作，但如果你说有更干净的方法。我很想知道。