Mengapakah '*ngClass' dalam Sudut Melemparkan Ralat 'Tidak dapat membaca sifat 'membuang' undefined'?

Kelas Bersyarat dengan *ngClass dalam Sudut

Angular menyediakan pelbagai pilihan untuk menggunakan kelas CSS secara bersyarat pada elemen HTML. Satu kaedah biasa ialah menggunakan arahan *ngClass. Walau bagaimanapun, jika tidak digunakan dengan betul, ia boleh membawa kepada ralat seperti "Tidak boleh membaca sifat 'alih keluar' yang tidak ditentukan."

Masalah:

Memandangkan kod Sudut di bawah, mengapa ralat berikut berlaku:

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>

Penyelesaian:

Ralat berlaku disebabkan penggunaan arahan ngClass dengan ungkapan bersyarat dalam versi Angular 2 . Dalam Angular 2 , arahan ngClass mengambil objek sebagai hujah, dengan kekunci mewakili nama kelas CSS dan nilai mewakili ungkapan boolean.

Untuk menyelesaikan isu ini, gantikan arahan *ngClass dengan mana-mana kaedah berikut disediakan oleh Angular:

Jenis Satu:

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

Jenis Dua:

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

Jenis Tiga:

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

Jenis Empat:

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

Untuk berbilang keadaan kelas, anda boleh menggunakan notasi objek seperti yang ditunjukkan dalam Jenis Dua. Rujuk dokumentasi Angular untuk mendapatkan butiran lanjut tentang menggunakan *ngClass.

Atas ialah kandungan terperinci Mengapakah '*ngClass' dalam Sudut Melemparkan Ralat 'Tidak dapat membaca sifat 'membuang' undefined'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!