Angular 2は、[class.className]バインディングを介して複数のクラスを追加します

アジェイ:

単一のクラスを追加すると、このようにうまくいきますが-

[class.loading-state]="loading"

しかし、どのように私は例場合は、複数のクラスを追加しませんloadingですtrue追加クラスが-"loading-state" & "my-class"

どうやってそれを行うのですか [class] binding

Vivek Doshi:

これを行うには、次のコマンドを使用しngClassます。

ここで、1番目、2番目、3番目はクラスの名前です。

そしてtrue / falseの代わりに、直接そこに条件を置くことができます

 <div [ngClass]="{'first': true, 'second': true, 'third': false}">...</div>

あなたの場合

 <div [ngClass]="{'loading-state': loading, 'my-class': loading }">...</div>

またはより短いVeriosn(@ matko.kvesicがコメントしたように)

<div [ngClass]="{'loading-state my-class': loading}">...</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Angular 6-ngModelは、関数を介して双方向のデータバインディングを確立します

分類Dev

Angular 2の複数のコンポーネントを介してサービスのプロパティにアクセスしますか?

分類Dev

プロバイダーを使用して複数の値をサービスコンストラクターに挿入します-angular2

分類Dev

Angular2はボディタグにクラスを追加します

分類Dev

Angular / Reactive Forms-FormControlのリストを追加または削除します-バインディングテンプレート(デモ付き)

分類Dev

Angular2のボディにクラスを追加します

分類Dev

Angularは[class.example]="true"のバインディングをどのように処理しますか?

分類Dev

Angular2タイプスクリプトが機能しないイベントによって呼び出されたメソッドを介してクラス変数値またはクラスプロパティ値を変更する

分類Dev

Angularのネストされたディレクティブを介してトランスクルージョンを渡す方法は?

分類Dev

Angular2ngModelはInputtype = "number"のバインディングを変更します

分類Dev

Angular 2、ディレクティブ属性バインディングを適切に使用してdivボックスの色/動作を表示できない

分類Dev

Angular2でngModelを使用せずに双方向バインディングを使用してカスタムディレクティブを作成する方法

分類Dev

Angular2:プロパティ 'controls'がタイプ 'AbstractControl'に存在しません。インデックスを介してformarray内のオブジェクトの.controlにアクセスするときのエラー

分類Dev

Angular.jsSVGバインディングはコンパイル前に404をスローします

分類Dev

Angular 2バインディングでHTML特殊文字を表示しますか?

分類Dev

Angular2はすべてのスタイルをバインドします

分類Dev

Angular 4 httpは、Springリクエストマッピングへの複数のパラメーターを使用して取得します

分類Dev

DurandalactivationData構成バインディングを介して複数のパラメーターを渡すことはできますか?

分類Dev

Angular5複数のサブスクライブコールを結合またはリファクタリングします

分類Dev

Angularのバインディング属性にクラスを渡すことは可能ですか?

分類Dev

スペースバーを介してAngular2のチェックボックスをオンまたはオフにします

分類Dev

Angularグリッドセルをバインディングを介して編集可能にするにはどうすればよいですか?

分類Dev

Angular2は、 `Renderer`クラスの` listen`メソッドを使用して、 `keydown`のようなキーボードイベントをバインドします

分類Dev

Angular 2双方向バインディングは、html入力タグからname属性を削除します

分類Dev

Angular 2依存性注入:複数のインスタンスを注入します

分類Dev

コンポーネントのAngular2ディレクティブはng-contentをオーバーライドしますか?

分類Dev

Angular2 AngularCLI(webpack)を使用してサードパーティのプラグインを追加する方法

分類Dev

グーグルマップのコールバック後にAngular2双方向バインディングが動作を停止します

分類Dev

Angular 2+では、Angularディレクティブも適用されている場合、ネイティブ要素をテンプレート変数にバインドするようにどのように指定しますか?

Related 関連記事

  1. 1

    Angular 6-ngModelは、関数を介して双方向のデータバインディングを確立します

  2. 2

    Angular 2の複数のコンポーネントを介してサービスのプロパティにアクセスしますか?

  3. 3

    プロバイダーを使用して複数の値をサービスコンストラクターに挿入します-angular2

  4. 4

    Angular2はボディタグにクラスを追加します

  5. 5

    Angular / Reactive Forms-FormControlのリストを追加または削除します-バインディングテンプレート(デモ付き)

  6. 6

    Angular2のボディにクラスを追加します

  7. 7

    Angularは[class.example]="true"のバインディングをどのように処理しますか?

  8. 8

    Angular2タイプスクリプトが機能しないイベントによって呼び出されたメソッドを介してクラス変数値またはクラスプロパティ値を変更する

  9. 9

    Angularのネストされたディレクティブを介してトランスクルージョンを渡す方法は?

  10. 10

    Angular2ngModelはInputtype = "number"のバインディングを変更します

  11. 11

    Angular 2、ディレクティブ属性バインディングを適切に使用してdivボックスの色/動作を表示できない

  12. 12

    Angular2でngModelを使用せずに双方向バインディングを使用してカスタムディレクティブを作成する方法

  13. 13

    Angular2:プロパティ 'controls'がタイプ 'AbstractControl'に存在しません。インデックスを介してformarray内のオブジェクトの.controlにアクセスするときのエラー

  14. 14

    Angular.jsSVGバインディングはコンパイル前に404をスローします

  15. 15

    Angular 2バインディングでHTML特殊文字を表示しますか?

  16. 16

    Angular2はすべてのスタイルをバインドします

  17. 17

    Angular 4 httpは、Springリクエストマッピングへの複数のパラメーターを使用して取得します

  18. 18

    DurandalactivationData構成バインディングを介して複数のパラメーターを渡すことはできますか?

  19. 19

    Angular5複数のサブスクライブコールを結合またはリファクタリングします

  20. 20

    Angularのバインディング属性にクラスを渡すことは可能ですか?

  21. 21

    スペースバーを介してAngular2のチェックボックスをオンまたはオフにします

  22. 22

    Angularグリッドセルをバインディングを介して編集可能にするにはどうすればよいですか?

  23. 23

    Angular2は、 `Renderer`クラスの` listen`メソッドを使用して、 `keydown`のようなキーボードイベントをバインドします

  24. 24

    Angular 2双方向バインディングは、html入力タグからname属性を削除します

  25. 25

    Angular 2依存性注入:複数のインスタンスを注入します

  26. 26

    コンポーネントのAngular2ディレクティブはng-contentをオーバーライドしますか?

  27. 27

    Angular2 AngularCLI(webpack)を使用してサードパーティのプラグインを追加する方法

  28. 28

    グーグルマップのコールバック後にAngular2双方向バインディングが動作を停止します

  29. 29

    Angular 2+では、Angularディレクティブも適用されている場合、ネイティブ要素をテンプレート変数にバインドするようにどのように指定しますか?

ホットタグ

アーカイブ