Rumah > hujung hadapan web > tutorial js > Bagaimana Menggunakan `ngClass` dengan Betul untuk Penggayaan Bersyarat dalam Sudut?

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

Barbara Streisand
Lepaskan: 2024-12-27 17:56:15
asal
851 orang telah melayarinya

How to Correctly Use `ngClass` for Conditional Styling in Angular?

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'"
Salin selepas log masuk

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

Pilihan 2:

[ngClass] = "{'my_class': step === 'step1'}"
Salin selepas log masuk

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]"
Salin selepas log masuk

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

Pilihan 4:

[ngClass] = "step == 'step1' ? 'my_class1' : 'my_class2'"
Salin selepas log masuk

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>
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan