Angular의 조건부 스타일링에 'ngClass'를 올바르게 사용하는 방법은 무엇입니까?

Angular에서 *ngClass를 사용한 조건부 클래스

Angular 애플리케이션의 일반적인 요구 사항 중 하나는 특정 조건에 따라 조건부로 클래스를 적용하는 것입니다. ngClass 지시어는 이를 달성하는 편리한 방법을 제공합니다.

발생한 문제

ngClass를 특정 방식으로 사용할 때 "정의되지 않은 '제거' 속성을 읽을 수 없습니다."와 같은 오류가 발생할 수 있습니다. 이 오류는 지시문의 잘못된 사용을 나타냅니다.

Angular 2 Angular 2 이상에서

ngClass

의 올바른 사용법은 조건부 클래스 적용을 위한 여러 옵션을 제공합니다.

옵션 1:

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

이 구문은 'step' 변수가 'step1'과 같은 경우에만 'my_class' 클래스를 추가합니다.

옵션 2:

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

이 옵션은 객체 리터럴을 사용하여 조건과 해당 클래스를 지정합니다. 적용됩니다.

옵션 3:

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

이 방법은 해시 조회를 활용하여 'step' 변수의 값에 따라 적절한 클래스를 적용합니다.

옵션 4:

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

이 구문은 삼항 연산자를 사용하여 'step' 변수를 기반으로 클래스를 조건부로 설정합니다.

예

코드에서 올바른 구문이 아닌 ngClass={active: step==='step1'}을 사용하여 명시하셨습니다. 대신 위에 설명된 옵션 중 하나를 사용하세요. 예:

<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 문서를 참조하세요.

위 내용은 Angular의 조건부 스타일링에 'ngClass'를 올바르게 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!