Dynamiczna nazwa klasy wewnątrz ngClass w kątowej 2

Muszę interpolować wartość wewnątrz ngClasswyrażenia, ale nie mogę zmusić go do działania.

Wypróbowałem te rozwiązania, które jako jedyne mają dla mnie sens, te dwa zawodzą z interpolacją:

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

Ten działa z interpolacją, ale kończy się niepowodzeniem z dynamicznie dodaną klasą, ponieważ cały ciąg jest dodawany jako klasa:

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

Więc moje pytanie brzmi: jak używasz dynamicznych nazw klas w ngClassten sposób?

Próbować

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

zamiast.

lub

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

lub nawet

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

będzie działać, ale dodatkową zaletą używania ngClass jest to, że nie nadpisuje innych klas, które są dodawane jakąkolwiek inną metodą (np.: [class.xyz]dyrektywa lub classatrybut, itp.), jak to classma miejsce.

Aktualizacja Angular 9

Nowy kompilator, Ivy, zapewnia większą przejrzystość i przewidywalność tego, co dzieje się, gdy w tym samym elemencie istnieją różne typy powiązań klas. Przeczytaj więcej na ten temat tutaj.

ngClass przyjmuje trzy typy danych wejściowych

• Obiekt: każdy klucz odpowiada nazwie klasy CSS, nie możesz mieć kluczy dynamicznych, ponieważ key 'key' "key"wszystkie są takie same i [key]nie są obsługiwane AFAIK.
• Tablica: może zawierać tylko listę klas, bez warunków, chociaż działa operator trójskładnikowy
• Łańcuch / wyrażenie: tak jak normalny atrybut klasy

Ten powinien działać

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

ale Angular rzuca się na tę składnię. Uważam to za błąd. Zobacz też https://stackoverflow.com/a/36024066/217408

Pozostałe są nieważne. Nie możesz używać []razem z {{}}. Albo jedno, albo drugie. {{}}wiąże wynik stringified, który w tym przypadku nie prowadzi do pożądanego wyniku, ponieważ obiekt musi zostać przekazany ngClass.

Przykład Plunkera

Aby obejść składnię pokazaną przez @A_Sing lub

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

może być użyty.

Oto przykład czegoś, co robię dla wielu klas z wieloma warunkami :

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

gdzie:
classesjest obiektem zawierającym ciągi różnych nazw klas. na przykładclass.icon.large = "app__icon--large"

To dynamiczne! Aktualizacje w miarę aktualizacji warunków.

chcę wspomnieć o kilku ważnych kwestiach, o których należy pamiętać podczas wdrażania wiązania klas.

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

class tutaj nie jest wiążące poprawnie, ponieważ jeden warunek ma być spełniony, podczas gdy masz dwie identyczne klasy „badge-warning”, które mogą mieć dwa różne warunki. Aby to poprawić

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

Możesz użyć <i [className]="'fa fa-' + data?.icon"> </i>