Açısal 2'de ngClass içindeki dinamik sınıf adı

Bir ngClassifadenin içindeki bir değeri enterpolasyona tabi tutmam gerekiyor ama çalışmasını sağlayamıyorum.

Bana mantıklı gelen bu çözümü denedim, bu ikisi enterpolasyonda başarısız oldu:

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

Bu, enterpolasyonla çalışır ancak dinamik olarak eklenen sınıfla başarısız olur, çünkü dizenin tamamı bir sınıf olarak eklenir:

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

Öyleyse sorum şu, dinamik sınıf adlarını ngClassböyle nasıl kullanacaksınız ?

Deneyin

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

yerine.

veya

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

ya da

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

çalışmak ancak kullanmanın ekstra faydası olacaktır ngClass tam o değil üzerine yazma diğer sınıfları yok başka yöntemle eklenir: (örn [class.xyz]direktif veya classöznitelik, vs.) classyapar.

Angular 9 Güncellemesi

Yeni derleyici Ivy, aynı öğe üzerinde farklı türde sınıf bağlamaları olduğunda ne olacağı konusunda daha fazla netlik ve öngörülebilirlik getiriyor. Burada daha fazlasını okuyun.

ngClass üç tür girdi alır

• Nesne: her anahtar bir CSS sınıf adına karşılık gelir, dinamik anahtarlara sahip olamazsınız çünkü key 'key' "key"hepsi aynıdır ve [key]AFAIK desteklenmez.
• Dizi: üçlü operatör çalışmasına rağmen yalnızca sınıfların listesini içerebilir, koşul yok
• Dize / ifade: normal sınıf niteliği gibi

Bu çalışmalı

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

ancak bu sözdiziminde Açısal atışlar. Bunu bir hata olarak kabul ediyorum. Ayrıca bkz. Https://stackoverflow.com/a/36024066/217408

Diğerleri geçersiz. İle []birlikte kullanamazsınız {{}}. Ya biri ya da diğeri. {{}}bir nesnenin iletilmesi gerektiğinden, bu durumda istenen sonuca götürmeyen sonuç dizgesini bağlar ngClass.

Plunker örneği

Çözüm olarak @A_Sing tarafından gösterilen sözdizimi veya

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

kullanılabilir.

İşte için yapıyorum şeyin bir örnek birden fazla sınıfta ile birden çok koşul :

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

burada:
classesçeşitli sınıf adlarının dizelerini içeren bir nesnedir. Örneğinclass.icon.large = "app__icon--large"

Dinamik! Koşullar güncellendiğinde güncellemeler.

Sınıf bağlamayı uygularken akılda tutulması gereken bazı önemli noktalardan bahsetmek istiyorum.

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

buradaki sınıf doğru bir şekilde bağlayıcı değildir çünkü bir koşul karşılanmalıdır, oysa iki farklı koşula sahip olabilecek iki özdeş sınıf 'rozet uyarısı' vardır. Bunu düzeltmek için

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

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