각도: *ngClass의 조건부 클래스

각도: *ngClass의 조건부 클래스

Angular 코드에 무슨 문제가 있나요?다음의 에러가 표시됩니다.

BrowserDomAdapter.removeClass에서 정의되지 않은 속성 '제거'를 읽을 수 없습니다.

<ol>
  <li *ngClass="{active: step==='step1'}" (click)="step='step1'">Step1</li>
  <li *ngClass="{active: step==='step2'}" (click)="step='step2'">Step2</li>
  <li *ngClass="{active: step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

Angular version 2+에서는 조건부로 클래스를 추가할 수 있는 몇 가지 방법이 있습니다.

제1종

    [class.my_class] = "step === 'step1'"

제2종

    [ngClass]="{'my_class': step === 'step1'}"

및 다중 옵션:

    [ngClass]="{'my_class': step === 'step1', 'my_class2' : step === 'step2' }"

제3종

    [ngClass]="{1 : 'my_class1', 2 : 'my_class2', 3 : 'my_class4'}[step]"

제4종

    [ngClass]="step == 'step1' ? 'my_class1' : 'my_class2'"

이러한 예는 문서 페이지에서 확인할 수 있습니다.

[ngClass]=...*ngClass.

*는 예를 들어 으로 하고 이 구문에서는 를 들어 구조 디렉티브를 사용할 수 .

<div *ngFor="let item of items">{{item}}</div>

더 긴 동등한 버전 대신

<template ngFor let-item [ngForOf]="items">
  <div>{{item}}</div>
</template>

https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html 도 참조해 주세요.

<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

https://angular.io/docs/ts/latest/guide/template-syntax.html 도 참조해 주세요.

<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

<!-- binding to `class.special` trumps the class attribute -->
<div class="special"
     [class.special]="!isSpecial">This one is not so special</div>

<!-- reset/override all class names with a binding  -->
<div class="bad curly special"
     [class]="badCurly">Bad curly</div>

은 '보다 낫다'를하는 것입니다.[class.active].

예:

<ol class="breadcrumb">
    <li [class.active]="step=='step1'" (click)="step='step1'">Step1</li>
</ol>

입니다.ngClass 말합니다

[ngClass]="{'classname' : condition}"

그러니까 당신 경우에는 그냥 이렇게...

<ol class="breadcrumb">
  <li [ngClass]="{'active': step==='step1'}" (click)="step='step1'">Step1</li>
  <li [ngClass]="{'active': step==='step2'}" (click)="step='step2'">Step2</li>
  <li [ngClass]="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

다음 예제를 사용하면 'IF ELSE'를 사용할 수 있습니다.

<p class="{{condition ? 'checkedClass' : 'uncheckedClass'}}">
<p [ngClass]="condition ? 'checkedClass' : 'uncheckedClass'">
<p [ngClass]="[condition ? 'checkedClass' : 'uncheckedClass']">

ngClass를 사용하여 Angular가 아닌 조건부로 클래스 이름을 적용할 수 있습니다.

예를들면

[ngClass]="'someClass'">

조건부

[ngClass]="{'someClass': property1.isValid}">

복수 조건

 [ngClass]="{'someClass': property1.isValid && property2.isValid}">

방법식

[ngClass]="getSomeClass()"

이 메서드는 컴포넌트 내부에 있습니다.

 getSomeClass(){
        const isValid=this.property1 && this.property2;
        return {someClass1:isValid , someClass2:isValid};
    }

Angular는 조건부로 클래스를 추가하는 여러 가지 방법을 제공합니다.

첫 번째 방법

active는 클래스 이름입니다.

[class.active]="step === 'step1'"

세컨드웨이

active는 클래스 이름입니다.

[ngClass]="{'active': step=='step1'}"

서드웨이

ternary 연산자 class1과 class2를 사용하여 클래스 이름을 지정합니다.

[ngClass]="(step=='step1')?'class1':'class2'"

써야지.[ngClass]*ngClass 경우는 다음과 같습니다.

<ol class="breadcrumb">
  <li [ngClass]="{active: step==='step1'}" (click)="step='step1; '">Step1</li>
  (...)

»Angular 7.X

CSS 클래스는 표현식 평가 유형에 따라 다음과 같이 업데이트됩니다.

• string - 문자열에 나열된 CSS 클래스(스페이스 구분)가 추가됩니다.

• Array - Array 요소로 선언된 CSS 클래스가 추가됩니다.

• 오브젝트 - 키는 값에 지정된 식이 truthy 값으로 평가될 때 추가되는 CSS 클래스입니다.그렇지 않으면 삭제됩니다.

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

또한 메서드 함수를 사용하여 추가할 수 있습니다.

HTML에서

<div [ngClass]="setClasses()">...</div>

in component.ts.

// Set Dynamic Classes
  setClasses() {
    let classes = {
      constantClass: true,
      'conditional-class': this.item.id === 1
    }

    return classes;
  }

MostafaMashayekhi의 옵션2 >에 대한 답변을 확장하려면 , 를 사용하여 여러 옵션을 연결할 수도 있습니다.

[ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"

또한 *ngIf는 보통 *ngFor와 조합하여 사용할 수 있습니다.

class="mats p" *ngIf="mat=='painted'"

[ngClass] class [ class . classname ]입니다.을 하다
[class.my-class]="step==='step1'"

[ngClass]="{'my-class': step=='step1'}"

둘 다 똑같이 작동합니다!

리액티브 폼을 만드는 동안 버튼에 2종류의 클래스를 할당해야 했습니다.저는 이렇게 했습니다.

<button type="submit" class="btn" [ngClass]="(formGroup.valid)?'btn-info':''" 
[disabled]="!formGroup.valid">Sign in</button>

형식이 유효한 경우 버튼에는 btn 및 btn-class(부트스트랩에서)가 있고, 그렇지 않은 경우에는 btn 클래스만 있습니다.

다음 구문을 사용하여 클래스를 동적으로 만들 수 있습니다.Angular 2 Plus에서는 다음과 같은 다양한 방법으로 이 작업을 수행할 수 있습니다.

[ngClass]="{'active': arrayData.length && arrayData[0]?.booleanProperty}"

[ngClass]="{'active': step}"

[ngClass]="step== 'step1'?'active':''"

[ngClass]="step? 'active' : ''"

YourCondition은 조건 또는 부울 속성입니다.그 후 다음과 같이 합니다.

[class.yourClass]="YourCondition"

ngClass구문:

[ngClass]="{'classname' : conditionFlag}"

다음과 같이 사용할 수 있습니다.

<ol class="breadcrumb">
  <li [ngClass]="{'active': step==='step1'}" (click)="step='step1'">Step1</li>
  <li [ngClass]="{'active': step==='step2'}" (click)="step='step2'">Step2</li>
  <li [ngClass]="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

이것이 나에게 효과가 있었다.

[ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"

디렉티브는 다음 세 가지 유형 중 어떤 식으로 표현식이 평가되는지에 따라 3가지 방식으로 동작합니다.

1. 식이 문자열로 평가되는 경우 문자열은 공백으로 구분된1개 이상의 클래스 이름이어야 합니다.
2. 표현식이 객체에 대해 평가될 경우 truthy 값을 가진 객체의 각 키-값 쌍에 대해 대응하는 키가 클래스 이름으로 사용됩니다.
3. 식이 어레이를 평가하는 경우 어레이의 각 요소는 유형 1과 같은 문자열이거나 유형 2와 같은 개체여야 합니다.즉, 배열 내에서 문자열과 개체를 함께 사용하여 표시되는 CSS 클래스를 보다 세밀하게 제어할 수 있습니다.이 예에 대해서는, 다음의 코드를 참조해 주세요.

    [class.class_one] = "step === 'step1'"

    [ngClass]="{'class_one': step === 'step1'}"

여러 옵션의 경우:

    [ngClass]="{'class_one': step === 'step1', 'class_two' : step === 'step2' }" 

    [ngClass]="{1 : 'class_one', 2 : 'class_two', 3 : 'class_three'}[step]"

    [ngClass]="step == 'step1' ? 'class_one' : 'class_two'"

관련 없음[ngClass]지시문입니다만, 같은 에러가 발생하고 있었습니다.

정의되지 않은 속성 '제거'를 읽을 수 없습니다...

제 잘못이라고 생각했어요.[ngClass]하지만 알고보니 제가 접근하려고 했던 부동산은[ngClass]초기화되지 않았습니다.

내 타이프스크립트 파일에 있는 것처럼

element: {type: string};

그리고 내 안에[ngClass]사용하고 있었습니다.

[ngClass]="{'active', element.type === 'active'}"

에러가 나고 있었다.

정의되지 않은 속성 'type'을 읽을 수 없습니다...

해결방법은 내 재산을 고쳐서

element: {type: string} = {type: 'active'};

부동산 조건을 맞추려는 누군가에게 도움이 되길 바랍니다.[ngClass]

위해서elseifstatement (less comparison)와 같은 사용: (예를 들어 3개의 스테이트먼트를 비교합니다)

<div [ngClass]="step === 'step1' ? 'class1' : (step === 'step2' ? 'class2' : 'class3')"> {{step}} </div>

<div class="collapse in " [ngClass]="(active_tab=='assignservice' || active_tab=='manage')?'show':''" id="collapseExampleOrganization" aria-expanded="true" style="">
 <ul> 	 <li class="nav-item" [ngClass]="{'active': active_tab=='manage'}">
<a routerLink="/main/organization/manage" (click)="activemenu('manage')"> <i class="la la-building-o"></i>
<p>Manage</p></a></li> 
<li class="nav-item" [ngClass]="{'active': active_tab=='assignservice'}"><a routerLink="/main/organization/assignservice" (click)="activemenu('assignservice')"><i class="la la-user"></i><p>Add organization</p></a></li>
</ul></div>

코드는 ngClass의 좋은 예입니다.

[ngClass]="(active_tab=='assignservice' || active_tab=='manage')?'show':''"

[ngClass]="{'active': active_tab=='assignservice'}"

이렇게 해보세요.

"로 클래스를 정의합니다.

<ol class="breadcrumb">
    <li *ngClass="{'active': step==='step1'}" (click)="step='step1; '">Step1</li>
    <li *ngClass="{'active': step==='step2'}"  (click)="step='step2'">Step2</li>
    <li *ngClass="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

사용자가 & 및 |를 기준으로 클래스를 표시하는 경우 아래가 작업입니다.

[ngClass]="{'clasname_1':  condition_1 && condition_2, 'classname_2':  condition_1 && condition2, 'classname_3': condition}"

예:

[ngClass]="{'approval-panel-mat-drawer-side-left':  similar_toil_mode==='side' && showsTheSimilarToilsWithCloseIcon, 'approval-panel-mat-drawer-side-right':  similar_toil_mode==='side' && !showsTheSimilarToilsWithCloseIcon, 'approval-panel-mat-drawer-over': similar_toil_mode==='over'}"

언급URL : https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass