Angular の「*ngClass」が「未定義のプロパティ 'remove' を読み取れません」エラーをスローするのはなぜですか?

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

Angular には、条件付きで CSS クラスを HTML 要素に適用するためのさまざまなオプションが用意されています。一般的な方法の 1 つは、*ngClass ディレクティブを使用することです。ただし、正しく使用しないと、「未定義のプロパティ 'remove' を読み取れません」のようなエラーが発生する可能性があります。

問題:

以下の Angular コードを考えると、なぜ次のエラーが発生するのでしょうか発生:

Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass

<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 バージョン 2 の条件式で ngClass ディレクティブが使用されているためにエラーが発生します。 。 Angular 2 では、 ngClass ディレクティブは引数としてオブジェクトを受け取り、キーは CSS クラス名を表し、値はブール式を表します。

この問題を解決するには、*ngClass ディレクティブを次のいずれかに置き換えます。 Angular によって提供される次のメソッド:

Type 1 つ目:

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

タイプ 2:

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

タイプ 3:

[ngClass]="{1: 'active', 2: 'step2', 3: 'step3'}[step]"

タイプ4:

[ngClass]="step === 'step1' ? 'active' : 'inactive'"

複数のクラス条件の場合、タイプ 2 に示すようにオブジェクト表記を使用できます。 *ngClass の使用の詳細については、Angular ドキュメントを参照してください。

以上がAngular の「*ngClass」が「未定義のプロパティ 'remove' を読み取れません」エラーをスローするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。