Angular2 [ngClass] 조건부 부트 스트랩 스타일링이 끊어짐

조건부 ngClass 스타일 및 부트 스트랩 라벨로 Angular2 작업을 수행 할 수 없습니다.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

나는 가이드 (https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html)를 업그레이드 AngularJS와를 따라했지만이 동작하지 않습니다 제대로

출처

2017-02-06 dannash918

체크 아웃 여기에 솔루션에 http 조건부 클래스를 추가 : // 유래를 .com/questions/42017246/angular2-toggle-icons-inside-ngfor/42017945 # 42017945 도움이 될 수도 있습니다. – Kuncevic

위의 질문을 참조하십시오. 같은 문제가있었습니다. 같은 스타일을 가짐으로써 하나의 값이 참일 때 label을 추가하고 false 일 때 그 값을 제거하도록 angle을 말합니다. 전통적인 태그'class = "label"' –

[ngClass]에서 단일 개체 키에 singel 클래스 이름을 전달할 수 있다고 생각합니다. 그래서 단순히 class="label"를 사용하여 직접 HTML 클래스에 고정 된 일반적인 클래스를 넣어 사용할 수있는 유일한 또한 [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'">

출처

2017-02-06 05:12:55

을 사용하여 레이블 추가 객체 키에 여러 개의 클래스 이름을 전달할 수 있지만 모순 된 평가에서는 추가 할 수 없습니다 –

당신은 조건이 같은 요구 레이블 클래스 (예를 들어 label-success) 추가 할 수 있습니다

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

을

기본적으로 label 클래스가 있고 조건에 따라 추가 클래스를 추가합니다.

출처

2017-02-06 05:12:01

Angular2 [ngClass] 조건부 부트 스트랩 스타일링이 끊어짐

답변

관련 문제