角2：有條件的內容與材料圖標設置按鈕

嗯，我學的角度2，和IM通過開發日誌的形式出發，我無法作出一個按鈕，有條件的內容。角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添加到我的posible結果中？

來源

2017-03-25 Joaquin Hernandez Zubiri

試試這個 -

<button class="login-button" (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-25 05:31:02

它的工作原理，與* ngIf相同。但我想知道是否有某種方法只有一個按鈕。謝謝你，我不知道隱藏的功能。 –

你是什麼意思1按鈕？請解釋一下 –

使用這種方法，您將創建兩個按鈕，如果布爾值爲false，則顯示一個按鈕，如果布爾值爲true，則顯示另一個按鈕。我想知道它是否可以只有一個。 –

您可以使用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-25 05:41:35

這工作正常。謝謝。 –

角2：有條件的內容與材料圖標設置按鈕

回答

相關問題