[解決済み] AngularのngClassとトグルクラスのクリックイベント
2022-02-14 10:25:47
質問
Angularでは
ngClass
とクリックイベントでクラスが切り替わります。ネットで調べてみましたが、angular1のものもあり、明確な指示や例がありません。どんな助けでも大いに感謝されます
HTMLでは、以下のようになっています。
<div class="my_class" (click)="clickEvent($event)" ngClass="{'active': toggle}">
Some content
</div>
で
.ts
:
clickEvent(event) {
// Haven't really got far
var targetEle = event.srcElement.attributes.class;
}
解決方法は?
これでうまくいくはずです。
.htmlの場合。
<div class="my_class" (click)="clickEvent()"
[ngClass]="status ? 'success' : 'danger'">
Some content
</div>
.tsで。
status: boolean = false;
clickEvent(){
this.status = !this.status;
}
関連
-
[解決済み] node_modules が空になったので、`npm install`を実行する必要があるかもしれない。
-
[解決済み] ngForにフィルターをかけるには?
-
[解決済み] updateValueAndValidityとは?
-
[解決済み] Angular 8 NgForはArray errorやAcces Control Allow originなどのIterableへのバインディングのみをサポートしています。
-
[解決済み] Angular:*ngClassを使った条件付きクラス
-
[解決済み] Angular 2+でngShowとngHideに相当するものは何ですか?
-
[解決済み] Angularプロジェクトごとに生成される膨大な数のファイル
-
[解決済み] Angular 2のキープレスごとの変更イベント
-
[解決済み】Angularウィンドウのリサイズイベント
-
[解決済み】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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ERR_INVALID_HTTP_RESPONSEをAngular 7とASP.Net Core 2.2を使ってGoogle Chromeブラウザーで使用する場合
-
[解決済み】エラー。どのルートにもマッチしません。URLセグメント: - Angular 2
-
[解決済み】「ルーターリンク」は既知のプロパティではないため、バインドできない
-
[解決済み] Angular2 Router: Error: Cannot find primary outlet to load 'InboxComponent'.
-
[解決済み] FormBuilder のプロバイダがない [重複] 。
-
[解決済み] Angular2 Final Release - 「Error: AngularにはZone.jsのプロリフィルが必要です"
-
[解決済み] イオン4オブザーバブル
-
[解決済み] "rxjs" observable.throw は関数ではありません - Angular4
-
[解決済み] ionInputとionChangeで有意差あり
-
[解決済み] エラーです。参照または変数に代入できません! Angular 4 [重複]の場合