Angular で条件付きスタイル設定に「ngClass」を正しく使用する方法は?

Angular の *ngClass を使用した条件付きクラス

Angular アプリケーションの一般的な要件の 1 つは、特定の条件に基づいてクラスを条件付きで適用することです。 ngClass ディレクティブは、これを実現する便利な方法を提供します。

問題が発生しました

特定の方法で ngClass を使用すると、「未定義のプロパティ 'remove' を読み取れません」のようなエラーが発生する場合があります。このエラーは、ディレクティブの誤った使用法を示しています。

Angular 2 での ngClass の正しい使用法

Angular 2 以降では、条件付きクラスを適用するためのいくつかのオプションが提供されています。

オプション1:

[class.my_class] = "step === 'step1'"

この構文は、'step' 変数が 'step1' と等しい場合にのみ 'my_class' クラスを追加します。

オプション 2:

[ngClass] = "{'my_class': step === 'step1'}"

このオプションは、オブジェクト リテラルを使用して条件と

オプション 3:

[ngClass] = "{'1' : 'my_class1', '2' : 'my_class2', '3' : 'my_class4'}[step]"

このメソッドは、ハッシュ ルックアップを利用して、「ステップ」の値に基づいて適切なクラスを適用します。変数。

オプション4:

[ngClass] = "step == 'step1' ? 'my_class1' : 'my_class2'"

この構文では、三項演算子を使用して、'step' 変数に基づいて条件付きでクラスを設定します。

例

コードでは、 ngClass={active: step==='step1'} を使用すると述べましたが、これは正しい構文ではありません。代わりに、上記で概説したオプションのいずれかを使用してください。例:

<ol>
  <li [ngClass]="{'active': step==='step1'}" (click)="step='step1'">Step1</li>
  <li [ngClass]="{'active': step==='step2'}" (click)="step='step2'">Step2</li>
  <li [ngClass]="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

これらの代替アプローチのいずれかを採用すると、発生したエラーが解決されるはずです。詳細については、Angular ドキュメントを参照してください。

以上がAngular で条件付きスタイル設定に「ngClass」を正しく使用する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。