각 2의 ngClass 내부 동적 클래스 이름

각 2의 ngClass 내부 동적 클래스 이름

내부의 값을 보간해야 합니다.ngClass표현은 하는데 작동이 안 돼요.

제가 이해할 수 있는 유일한 해결책을 시도했지만, 이 두 가지는 보간법으로 실패했습니다.

<button [ngClass]="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>
<button [ngClass]="{namespace + '-mybutton': type === 'mybutton'}"></button>

이 문자열은 보간법과 함께 작동하지만 전체 문자열이 클래스로 추가되기 때문에 동적으로 추가된 클래스에서 실패합니다.

<button ngClass="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>

그래서 제 질문은 동적 클래스 이름을 어떻게 사용하는지입니다.ngClass이렇게요?

해라

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

대신.

또는

<button [ngClass]="[type === 'mybutton' ? namespace + '-mybutton' : '']"></button>

아니 심지어는

<button class="{{type === 'mybutton' ? namespace + '-mybutton' : ''}}"></button>

효과는 있지만 사용의 추가적인 이점ngClass는 그것입니다.다른 메서드에 의해 추가된 다른 클래스를 덮어쓰지 않습니다(예: [class.xyz]디렉티브 또는 class속성 등)으로 class한다.

Angular 9 업데이트

새로운 컴파일러인 Ivy는 동일한 요소에 다른 유형의 클래스 바인딩이 있을 때 발생하는 상황에 대해 더 명확하고 예측 가능성을 제공합니다.자세한 내용은 여기를 참조하십시오.

---

ng클래스는 세 가지 유형의 입력을 사용합니다.

• 개체: 각 키는 CSS 클래스 이름에 해당하므로 동적 키를 가질 수 없습니다.key 'key' "key"다 똑같고, 그리고.[key]AFAIK가 지원되지 않습니다.
• 배열: 3차 연산자가 작동하지만 조건 없이 클래스 목록만 포함할 수 있습니다.
• 문자열/식: 일반 클래스 속성과 동일

이게 작동할 겁니다.

<button [ngClass]="{[namespace + '-mybutton']: type === 'mybutton'}"></button>

하지만 Angular는 이 구문을 사용합니다.저는 이것을 벌레로 생각합니다.https://stackoverflow.com/a/36024066/217408 도 참조하십시오.

다른 것들은 유효하지 않습니다.사용할 수 없습니다.[]와 함께{{}}둘 중 하나 아니면 다른 하나. {{}}개체를 전달해야 하기 때문에 이 경우 원하는 결과로 이어지지 않는 문자열화된 결과를 바인딩합니다.ngClass.

플런커 예제

@A_Sing 또는 에 표시된 구문에 대한 해결 방법으로

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

사용할 수 있습니다.

  <div *ngFor="let celeb of singers">
  <p [ngClass]="{
    'text-success':celeb.country === 'USA',
    'text-secondary':celeb.country === 'Canada',
    'text-danger':celeb.country === 'Puorto Rico',
    'text-info':celeb.country === 'India'
  }">{{ celeb.artist }} ({{ celeb.country }})
</p>
</div>

기본적으로 다른 답의 중복입니다. 하지만 완전히 이해하지 못했습니다. 아마도 누군가가 이 예를 통해 이제서야 이해할 수 있을 것입니다.

[ngClass]="['svg-icon', 'recolor-' + recolor, size ? 'size-' + size : '']"

예를 들어 에 대해 발생할 것입니다.

class="svg-icon recolor-red size-m"

이것은 완벽하게 작동합니다!

<div [class.any-class]="condition"></div>

예:

<div [class.hide]="user.isPaid()"></div>

다음은 여러 조건을 가진 여러 클래스에 대해 수행하는 작업의 예입니다.

[ngClass]="[variableInComponent || !anotherVariableInComponent ? classes.icon.large : classes.icon.small, editing ? classes.icon.editing : '']"

위치:
classes는 다양한 클래스 이름의 문자열을 포함하는 개체입니다.class.icon.large = "app__icon--large"

역동적입니다!조건이 업데이트됨에 따라 업데이트됩니다.

저는 클래스 바인딩을 구현하면서 염두에 두어야 할 몇 가지 중요한 점을 언급하고 싶습니다.

    [ngClass] = "{
    'badge-secondary': somevariable  === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-success': somevariable  === value1 }" 

여기서 클래스는 하나의 조건이 충족되어야 하기 때문에 올바르게 바인딩되지 않는 반면, 두 개의 다른 조건을 가질 수 있는 두 개의 동일한 클래스 'syslog-warning'이 있습니다.이 문제를 해결하려면

 [ngClass] = "{
    'badge-secondary': somevariable === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1 || somevariable  === value1, 
    'badge-success': somevariable  === value1 }" 

가장 쉬운 방법은 component.ts에서 getter를 정의하는 것입니다.가장 중요한 것은 Angular coding 스타일의 권장 사항 중 하나입니다.

// in your component.ts
get buttonClasses() {
    return { [`${this.namespace}-mybutton`]: this.type === 'mybutton' }
}

<!-- in your component.html -->
<button [ngClass]="buttonClasses"></button>

사용할 수 있습니다.<i [className]="'fa fa-' + data?.icon"> </i>

더 우아한 해결책은 사용하는 것입니다.&&((으)로 사용NgFor그리고 그것들first자체 매칭을 무료로 사용할 수 있습니다. to):

    <div 
        *ngFor="let day of days;
                let first = first;"
        class="day"
        [ngClass]="first && ('day--' + day)"
    </div>

다음과 같이 표시됩니다.

class="day day--monday"

언급URL : https://stackoverflow.com/questions/37090877/dynamic-classname-inside-ngclass-in-angular-2