Angular2 [ngClass] bedingtes Bootstrap-Design wird abgeschnitten

Ich kann Angular2 nicht mit einem bedingten ngClass-Styling und Bootstrap-Labels arbeiten lassen.Angular2 [ngClass] bedingtes Bootstrap-Design wird abgeschnitten

<h1 [ngClass]="{'label label-warning': yourName=='Daniel', 
       'label label-success': yourName!='Daniel'}">

ngClass erscheint das erste ‚label‘ von einem 'label label-success' zu entfernen, wenn ich meine app Stil. Es wird korrekt formatiert, wenn die zweite Bedingung erfüllt ist, aber wenn die erste Bedingung erfüllt ist, ist das Styling falsch.

Bei der Prüfung des Elements ist der Stil h1.label.label-success, wenn die zweite Bedingung erfüllt ist. Wenn die erste Bedingung erfüllt ist, wird sie fälschlicherweise als h1.label-error formatiert.

Sehen Sie diesen Fehler für den Fehler.

https://plnkr.co/edit/qJLWBzCXXUn7hNKEWXIs?p=preview

Ich habe die AngularJS Upgrade-Handbuch (https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html) gefolgt, aber es kann nicht die Arbeit richtig

Quelle

2017-02-06 dannash918

Checkout-Lösung hier http: // Stackoverflow .com/questions/42017246/angle2-toggle-icons-inside-ngfor/42017945 # 42017945 könnte es helfen – Kuncevic

Siehe die obige Frage, hatte ich das gleiche Problem. Wenn Sie den gleichen Stil haben, sagen Sie eckig, dass Sie ein Label hinzufügen, wenn ein Wert wahr ist, und entfernen Sie diesen Wert, wenn er falsch ist. Hinzufügen von Label mit dem traditionellen Tag 'class =" label "' –

Ich denke in [ngClass] können Sie einen einzelnen Klassennamen in Einzelobjektschlüssel übergeben. So setzen Sie Ihre feste gemeinsame Klasse in direkt HTML-Klasse einfach class="label" und nur bedingt Klasse hinzufügen innen [ngClass]

<h1 
    class="label" 
    [ngClass]="{'label-warning': yourName=='Daniel','label-success': yourName!='Daniel'}">

Sie können auch Winkel 2 Artklasse verwenden [class.classname]="condtionexpression"

<h1 
    class="label" 
    [class.label-warning]="yourName=='Daniel'" 
    [class.label-success]="yourName!='Daniel'">

Quelle

2017-02-06 05:12:55

Sie dürfen mehrere Klassennamen in einem Objektschlüssel übergeben, sie können nur in widersprüchlichen Auswertungen nicht hinzugefügt werden –

Sie konnten die erforderliche Etikett Klasse (zB label-success) wie folgt bedingt hinzufügen:

<h1 *ngIf="yourName" class="label" 
[class.label-warning]="yourName != 'Daniel'" 
[class.label-success]="yourName=='Daniel'"> 
    Hello {{yourName}}! 
</h1>

So hat es standardmäßig eine label Klasse, dann hängen Sie die zusätzliche Klasse abhängig von Ihrer Bedingung an.

Quelle

2017-02-06 05:12:01

Antwort

Verwandte Themen