角2：材料アイコンで条件付きコンテンツのボタンを設定する

まあ、私は角度2を学習していますが、フォームを作成することから始まり、条件付きコンテンツのボタンを作るのに問題があります。それはisLoadingブール値をチェックし、このbool値に状態の内のhtmlを設定角2：材料アイコンで条件付きコンテンツのボタンを設定する

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

：

この補完テンプレートのコードは次のように行くだろう。右？

はい、これは、isLoadingがtrueの場合は "loading ..."、条件が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？" spinner "：" Log In arrow_forward "}}"という内容のボタンをレンダリングします。

アイコンのhtmlを私の考えられる結果に追加するにはどうすればよいですか？

出典

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

を使用することができます。しかし、ボタンを1つしか持たない方法があるのだろうかと思っていました。ところでありがとう、私は隠されたfunctionallityについて知りませんでした。 –

1ボタンで何を意味しますか？少し説明してください –

このメソッドでは、2つのボタンを作成し、ブール値がfalseの場合は1つを表示し、ブール値がtrueの場合は1つを表示します。私はそれがただ一つで作ることができるかどうか疑問に思いました。 –

あなたは* ngIfと同じ、それが動作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：材料アイコンで条件付きコンテンツのボタンを設定する

答えて

関連する問題