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

Question

Potrzebuję interpolować wartość wewnątrz wyrażenia ngClass, ale nie mogę go uruchomić.

Próbowałem te rozwiązania, które są jedynymi, które ma sens dla mnie, te dwa nie z interpolacji:

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

Ten współpracuje z interpolacją, ale nie z dynamicznie dodawane klasy ponieważ cały ciąg zostanie dodany jako klasę:

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

Więc moje pytanie jest w jaki sposób korzystać z dynamicznych classnames w ngClass jak to?

Answer 1

Spróbuj

<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 dodatkowo zaletą korzystania ngClass jest to, że nie zastępuje innych klas, które są dodawane w każdy inny sposób (na przykład : [class.xyz] dyrektywa lub atrybut class itp.) Pod numerem class.

---

ngClass trwa trzy rodzaje wejścia

• obiektu: każdy klucz odpowiada nazwie klasy CSS, nie można mieć klucze dynamiczne, ponieważ key'key'"key" wszystkie są takie same, a [key] nie jest obsługiwany AFAIK.
• Array: może zawierać listę klas, bez żadnych warunków tylko, chociaż operator trójargumentowy działa
• String/wyrażenie: podobnie jak atrybut normalny klasy

Answer 2

Ten powinien działać

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

ale kątowa rzuca na tej składni. Uznałbym to za błąd. Zobacz także https://stackoverflow.com/a/36024066/217408

Pozostałe są nieprawidłowe. Nie można używać [] razem z {{}}. Albo jedno, albo drugie. {{}} wiąże wynik uszeregowany, który nie prowadzi do pożądanego wyniku, ponieważ obiekt musi zostać przekazany do ngClass.

Plunker example

jako obejście składnia pokazano @A_Sing lub

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

mogą być użyte.