[解決済み] ngClassで複数の条件を設定する - Angular 4
2022-03-03 05:57:40
質問
ngClassで複数の条件を使用するには?例
<section [ngClass]="[menu1 ? 'class1' : '' || menu2 ? 'class1' : '' || (something && (menu1 || menu2)) ? 'class2' : '']">
というような感じです。2つのメニューに同じクラスがあり、どちらかのメニューがtrueで'something'がtrueの時にクラスが必要です。十分な説明ができたでしょうか?
解決方法は?
ngClass に配列を代入しようとしていますが、配列の要素を
||
ではなく
,
.
これを試してみてください。
<section [ngClass]="[menu1 ? 'class1' : '', menu2 ? 'class1' : '', (something && (menu1 || menu2)) ? 'class2' : '']">
この他のオプションも動作するはずです。
<section [ngClass.class1]="menu1 || menu2" [ngClass.class2] = "(menu1 || menu2) && something">
関連
-
[解決済み] node_modules が空になったので、`npm install`を実行する必要があるかもしれない。
-
[解決済み】Angularで実際のエラーメッセージの代わりに「Http failure response for (unknown url): 0 Unknown Error」が表示されるのですが。
-
[解決済み] FormBuilder のプロバイダがない [重複] 。
-
[解決済み] switchの使用時に「ステートメントはif文でフィルタリングされなければならない」というtslintのクレームが発生する。
-
[解決済み] なぜ mat-tables matRowDef は 2 つの変数を含むのですか?
-
[解決済み] Angular2の$document.ready()に相当します。
-
[解決済み] Angular HTMLバインディング
-
[解決済み] Angular:*ngClassを使った条件付きクラス
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み] モジュール "@angular-devkit/build-angular" が見つかりませんでした。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Angularのエラーです。NgModuleアノテーションを追加してください。
-
[解決済み] @viewChildが機能しない - プロパティnativeElementがundefinedで読み込めない
-
[解決済み】「ルーター・アウトレット」は既知の要素ではない
-
[解決済み】アンギュラーコンポーネントにサービスを注入しようとするとエラー "EXCEPTION: Can't resolve all parameters for component"、なぜ?
-
[解決済み] LegendItemComponent をカスタマイズする Angular 用 kendo-ui
-
[解決済み] ActivatedRouteSnapshot の注入ができない。
-
[解決済み] Angular2 - エラー。セレクタ "app-root" はどの要素にもマッチしませんでした。
-
[解決済み] ionInputとionChangeで有意差あり
-
[解決済み] このメソッドをリファクタリングして、認知的複雑度を21から許容される15に下げます。リファクタリングして複雑さを軽減する方法
-
[解決済み] モジュール 'ngx-cookie-service' が見つかりません。