Dynamischer Klassenname in ngClass in Winkel 2

Ich muss einen Wert innerhalb eines ngClassAusdrucks interpolieren, aber ich kann ihn nicht zum Laufen bringen.

Ich habe diese Lösung ausprobiert, die die einzigen sind, die für mich Sinn macht. Diese beiden scheitern bei der Interpolation:

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

Dieser arbeitet mit der Interpolation, schlägt jedoch mit der dynamisch hinzugefügten Klasse fehl, da die gesamte Zeichenfolge als Klasse hinzugefügt wird:

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

Meine Frage ist also, wie Sie dynamische Klassennamen in solchen verwenden ngClass?

Versuchen

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

stattdessen.

oder

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

oder auch

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

funktioniert, aber der zusätzliche Vorteil der Verwendung von ngClass besteht darin, dass andere Klassen , die mit einer anderen Methode (z. B. [class.xyz]Direktive oder classAttribut usw.) hinzugefügt wurden, nicht überschrieben werden class.

Angular 9 Update

Der neue Compiler Ivy bringt mehr Klarheit und Vorhersagbarkeit in das, was passiert, wenn verschiedene Arten von Klassenbindungen für dasselbe Element vorhanden sind. Lesen Sie hier mehr darüber.

ngClass akzeptiert drei Arten von Eingaben

• Objekt: Jeder Schlüssel entspricht einem CSS-Klassennamen. Sie können keine dynamischen Schlüssel haben, da key 'key' "key"alle gleich sind und [key]AFAIK nicht unterstützt wird.
• Array: Kann nur eine Liste von Klassen enthalten, keine Bedingungen, obwohl der ternäre Operator funktioniert
• String / Ausdruck: genau wie normales Klassenattribut

Dieser sollte funktionieren

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

aber Angular wirft auf diese Syntax. Ich würde das als Fehler betrachten. Siehe auch https://stackoverflow.com/a/36024066/217408

Die anderen sind ungültig. Sie können nicht []zusammen mit verwenden {{}}. Entweder der eine oder der andere. {{}}bindet das Ergebnis stringifiziert, was in diesem Fall nicht zum gewünschten Ergebnis führt, da ein Objekt an übergeben werden muss ngClass.

Plunker Beispiel

Um dieses Problem zu umgehen, wird die Syntax von @A_Sing oder angezeigt

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

kann verwendet werden.

Hier ist ein Beispiel für etwas, das ich für mehrere Klassen mit mehreren Bedingungen mache :

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

wo:
classes ein Objekt, das Zeichenfolgen verschiedener Klassennamen enthält. z.Bclass.icon.large = "app__icon--large"

Es ist dynamisch! Aktualisiert, wenn die Bedingungen aktualisiert werden.

Ich möchte einen wichtigen Punkt erwähnen, den Sie bei der Implementierung der Klassenbindung berücksichtigen sollten.

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

Die Klasse hier ist nicht korrekt verbindlich, da eine Bedingung erfüllt sein muss, wohingegen Sie zwei identische Klassen 'Badge-Warnung' haben, die zwei unterschiedliche Bedingungen haben können. Um dies zu korrigieren

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

Sie können verwenden <i [className]="'fa fa-' + data?.icon"> </i>