ng 클래스의 다중 조건 - 각도 4

ng 클래스의 다중 조건 - 각도 4

ngClass에 여러 조건을 사용하는 방법은 무엇입니까?예:

<section [ngClass]="[menu1 ? 'class1' : '' || menu2 ? 'class1' : '' || (something && (menu1 || menu2)) ? 'class2' : '']">

이런 거.저는 두 가지 메뉴에 대해 같은 수업을 받았고, 그 중 하나가 사실이고 '뭔가'가 사실일 때 수업이 필요합니다.내가 충분히 설명했기를 바랍니다.

ngClass에 어레이를 할당하려고 하지만 어레이 요소를 다음으로 구분하기 때문에 어레이 요소에 대한 구문이 잘못되었습니다.||대신에,.

사용해 보십시오.

<section [ngClass]="[menu1 ? 'class1' : '',  menu2 ? 'class1' : '', (something && (menu1 || menu2)) ? 'class2' : '']">

다음과 같은 다른 옵션도 작동해야 합니다.

<section [ngClass.class1]="menu1 || menu2" [ngClass.class2] = "(menu1 || menu2) && something">    

객체 표기가 필요합니다.

<section [ngClass]="{'class1':condition1, 'class2': condition2, 'class3':condition3}" > 

참조: NgClass

<section [ngClass]="{'class1': expression1, 'class2': expression2, 'class3': expression3}">

클래스 이름 주위에 작은 따옴표를 추가하는 것을 잊지 마십시오.

동일한 논리를 작성하는 방법은 여러 가지가 있습니다.앞에서 언급했듯이 객체 표기법이나 단순한 표현법을 사용할 수 있습니다.하지만 HTML의 논리는 그렇게 많이 사용하면 안 된다고 생각합니다. 테스트하고 문제를 찾기가 어렵습니다.getter 함수를 사용하여 클래스를 할당할 수 있습니다.

예를 들어;

public getCustomCss() {
    //Logic here;
    if(this.x == this.y){
        return 'class1'
    }
    if(this.x == this.z){
        return 'class2'
    }
}
<!-- HTML -->
<div [ngClass]="getCustomCss()"> Some prop</div>

//OR

get customCss() {
    //Logic here;
    if(this.x == this.y){
        return 'class1'
    }
    if(this.x == this.z){
        return 'class2'
    }
}
<!-- HTML -->
<div [ngClass]="customCss"> Some prop</div>

<a [ngClass]="{'class1':array.status === 'active','class2':array.status === 'idle','class3':array.status === 'inactive',}">

사용하는 대신 특정 클래스를 사용할 수 있습니다.두 번째 예에서는 만료 목적으로 연령 변수를 사용했습니다.

예 1:

<section
    [class.class1]="menu1"
    [class.class2]="menu2"
    [class.class3]="menu3">
    </section>

예 2:

   <section
    [class.class1]="age > 20"
    [class.class2]="age < 50"
    [class.class3]="age == 4">
    </section>

저는 이것이 기본적인 조건부 수업 중 하나이기를 바랍니다.

솔루션: 1

<section [ngClass]="(condition)? 'class1 class2 ... classN' : 'another class1 ... classN' ">

솔루션 2

<section [ngClass]="(condition)? 'class1 class2 ... classN' : '(condition)? 'class1 class2 ... classN':'another class' ">

솔루션 3

<section [ngClass]="'myclass': condition, 'className2': condition2">

저도 비슷한 문제가 있었습니다.여러 표현식을 보고 클래스를 설정하고 싶었습니다. ngClass는 구성 요소 코드 내부의 메서드를 평가하여 어떻게 해야 하는지 알려줄 수 있습니다.

그래서 *ngFor 내부:

<div [ngClass]="{'shrink': shouldShrink(a.category1, a.category2), 'showAll': section == 'allwork' }">{{a.listing}}</div>

구성 요소 내부:

section = 'allwork';

shouldShrink(cat1, cat2) {
    return this.section === cat1 || this.section === cat2 ? false : true;
}

여기서는 두 개의 다른 범주가 선택한 범주와 일치하는지 여부를 기준으로 div를 축소해야 하는지 계산해야 합니다.그리고 그것은 동작한다.따라서 여기서 메서드가 입력된 값을 반환하는 값을 기준으로 [ngClass]에 대한 참/거짓을 계산할 수 있습니다.

여러 동적 클래스를 더 쉽게 추가할 수 있는 방법은 다음과 같습니다.

<div [ngClass]="[class1, class2, condition ? class3 : '']"> Some content</div>

좀 더 정교한 상황에서는 이것이 도움이 될 수 있습니다.

<div [ngClass]="{'Class1':(condition1 || condition2), 'class2':( (condition1 || condition2) && condition3 )}"> Some content</div>

언급URL : https://stackoverflow.com/questions/44821875/multiple-conditions-in-ngclass-angular-4