Nama kelas dinamis di dalam ngClass di sudut 2

Saya perlu menginterpolasi nilai di dalam ngClassekspresi tetapi saya tidak bisa membuatnya berfungsi.

Saya mencoba solusi ini yang merupakan satu-satunya yang masuk akal bagi saya, keduanya gagal dengan interpolasi:

<button [ngClass]="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>
<button [ngClass]="{namespace + '-mybutton': type === 'mybutton'}"></button>

Yang ini bekerja dengan interpolasi tetapi gagal dengan kelas yang ditambahkan secara dinamis karena seluruh string ditambahkan sebagai kelas:

<button ngClass="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>

Jadi pertanyaan saya adalah bagaimana Anda menggunakan nama kelas dinamis ngClassseperti ini?

Mencoba

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

sebagai gantinya.

atau

<button [ngClass]="[type === 'mybutton' ? namespace + '-mybutton' : '']"></button>

atau bahkan

<button class="{{type === 'mybutton' ? namespace + '-mybutton' : ''}}"></button>

akan berfungsi tetapi manfaat tambahan menggunakan ngClass adalah ia tidak menimpa kelas lain yang ditambahkan oleh metode lain (misalnya: [class.xyz]direktif atau classatribut, dll.) seperti classhalnya.

Pembaruan Angular 9

Compiler baru, Ivy, menghadirkan lebih banyak kejelasan dan prediktabilitas terhadap apa yang terjadi jika ada berbagai jenis class-binding pada elemen yang sama. Baca Selengkapnya tentang itu di sini.

ngClass membutuhkan tiga jenis input

• Objek: setiap kunci sesuai dengan nama kelas CSS, Anda tidak boleh memiliki kunci dinamis, karena key 'key' "key"semuanya sama, dan [key]tidak didukung AFAIK.
• Array: hanya dapat berisi daftar kelas, tanpa syarat, meskipun operator terner berfungsi
• String / ekspresi: seperti atribut kelas normal

Yang ini harus bekerja

<button [ngClass]="{[namespace + '-mybutton']: type === 'mybutton'}"></button>

tapi Angular menggunakan sintaks ini. Saya akan menganggap ini bug. Lihat juga https://stackoverflow.com/a/36024066/217408

Yang lainnya tidak valid. Anda tidak dapat menggunakan []bersama dengan {{}}. Salah satunya. {{}}mengikat hasil yang dirangkai yang tidak mengarah ke hasil yang diinginkan dalam kasus ini karena sebuah objek perlu diteruskan ngClass.

Contoh Plunker

Sebagai solusinya, sintaks yang ditunjukkan oleh @A_Sing atau

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

dapat digunakan.

Berikut adalah contoh dari sesuatu yang saya lakukan untuk beberapa kelas dengan banyak kondisi :

[ngClass]="[variableInComponent || !anotherVariableInComponent ? classes.icon.large : classes.icon.small, editing ? classes.icon.editing : '']"

di mana:
classesadalah objek yang berisi string berbagai nama kelas. misalnyaclass.icon.large = "app__icon--large"

Ini dinamis! Pembaruan sebagai pembaruan kondisi.

saya ingin menyebutkan beberapa hal penting yang perlu diingat saat menerapkan pengikatan kelas.

    [ngClass] = "{
    'badge-secondary': somevariable  === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-success': somevariable  === value1 }" 

kelas di sini tidak mengikat dengan benar karena satu kondisi harus dipenuhi, sedangkan Anda memiliki dua kelas identik 'peringatan-lencana' yang mungkin memiliki dua kondisi berbeda. Untuk memperbaikinya

 [ngClass] = "{
    'badge-secondary': somevariable === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1 || somevariable  === value1, 
    'badge-success': somevariable  === value1 }" 

  <div *ngFor="let celeb of singers">
  <p [ngClass]="{
    'text-success':celeb.country === 'USA',
    'text-secondary':celeb.country === 'Canada',
    'text-danger':celeb.country === 'Puorto Rico',
    'text-info':celeb.country === 'India'
  }">{{ celeb.artist }} ({{ celeb.country }})
</p>
</div>

Kamu bisa memakai <i [className]="'fa fa-' + data?.icon"> </i>