Angular2 [ngClass] условный стиль бутстрапа отрезается

Question

Я не могу заставить Angular2 работать с условными стилями ngClass и надставками.

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

ngClass, кажется, удаление первого «метки» от 'label label-success', когда я стилизации моего приложения. Он правильно стирается, когда выполняется второе условие, но когда выполняется первое условие, стиль неверен.

При осмотре элемента, когда выполнено второе условие, стиль h1.label.label-success, однако при выполнении первого условия он имеет неправильный стиль как h1.label-error.

См. Этот плункер для ошибки.

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

Я следовал за AngularJS Upgrade руководства (https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html), но не могу заставить его работать правильно

Answer 1

Я думаю, что в [ngClass] вы можете передать имя класса в одном ключе объекта. Так положить фиксированный общий класс непосредственно HTML класса, используя просто class="label" и добавить класс условно только внутри [ngClass]

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

Также вы можете использовать класс угловой 2 стиля [class.classname]="condtionexpression"

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

Answer 2

Можно условно добавить необходимый класс метки (например, label-success), как это:

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

По умолчанию он имеет класс label, затем вы добавляете дополнительный класс в зависимости от вашего состояния.