Bagaimana Menggunakan `ngClass` dengan Betul untuk Penggayaan Bersyarat dalam Sudut?

Kelas Bersyarat dengan *ngClass dalam Sudut

Salah satu keperluan biasa dalam aplikasi Sudut ialah menggunakan kelas secara bersyarat berdasarkan syarat tertentu. Arahan ngClass menyediakan cara yang mudah untuk mencapai perkara ini.

Isu Ditemui

Anda mungkin menghadapi ralat seperti "Tidak boleh membaca sifat 'alih keluar' undefined" apabila menggunakan ngClass dalam cara tertentu. Ralat ini menunjukkan penggunaan arahan yang salah.

Penggunaan Betul ngClass dalam Angular 2

Angular 2 dan ke atas menawarkan beberapa pilihan untuk menggunakan kelas bersyarat:

Pilihan 1:

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

Sintaks ini menambah kelas 'my_class' hanya jika pembolehubah 'step' sama dengan 'step1'.

Pilihan 2:

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

Pilihan ini menggunakan literal objek untuk menentukan keadaan dan kelas yang sepadan menjadi digunakan.

Pilihan 3:

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

Kaedah ini menggunakan carian cincang untuk menggunakan kelas yang sesuai berdasarkan nilai pembolehubah 'langkah'.

Pilihan 4:

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

Sintaks ini menggunakan pengendali ternary untuk menetapkan kelas secara bersyarat berdasarkan pembolehubah 'step'.

Contoh

Dalam kod anda, anda menyatakan menggunakan ngClass={active: step==='step1'}, yang bukan sintaks yang betul. Sebaliknya, gunakan salah satu pilihan yang digariskan di atas. Contohnya:

<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>

Mengguna pakai salah satu pendekatan alternatif ini harus menyelesaikan ralat yang anda hadapi. Rujuk dokumentasi Angular untuk butiran lanjut.

Atas ialah kandungan terperinci Bagaimana Menggunakan `ngClass` dengan Betul untuk Penggayaan Bersyarat dalam Sudut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!