Rumah >hujung hadapan web >tutorial js >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!