Angular ngClass混合条件问题：添加条件类失效求助

Hey there! I see you're having trouble getting the btn-rounded class to apply via the object syntax in your ngClass expression. Let's get this sorted out so you end up with that perfect <a class="btn btn-success btn-md btn-rounded">okay</a> element.

First, let's go over a couple of reliable fixes:

Option 1: Use a Ternary Expression in the Array #

Instead of nesting an object inside the array, you can directly conditionally add the class string using a ternary operator. This avoids any potential parsing issues with mixed array/object syntax and keeps things straightforward:

<a class="btn" [ngClass]="['btn-' + buttonStyle, 'btn-' + buttonSize, isRounded ? 'btn-rounded' : '']">okay</a>

When isRounded is true, it adds btn-rounded to the class list; when false, it adds an empty string (which gets ignored, so no extra class cluttering up your markup).

Option 2: Switch to Full Object Syntax #

If you prefer a more declarative approach, define all your classes within a single object. This makes it crystal clear which classes are always applied and which are conditional:

<a class="btn" [ngClass]="{
  'btn-' + buttonStyle: true,
  'btn-' + buttonSize: true,
  'btn-rounded': isRounded
}">okay</a>

Here, we set true for the dynamic style/size classes since we always want them present, and tie btn-rounded directly to the isRounded boolean input.

Quick Check to Ensure It Works #

Don’t forget to verify that your isRounded input is actually receiving a true value from the parent component. Make sure you’re using property binding if you’re passing a boolean:

<!-- Correct way to pass a boolean value -->
<your-button-component [isRounded]="true" buttonStyle="success" buttonSize="md"></your-button-component>

If you just write isRounded="true" without square brackets, Angular treats it as the string "true" (which evaluates to true in a boolean context, but property binding is better practice for actual boolean values).

Either of the above options should get your btn-rounded class showing up exactly when you need it!

内容的提问来源于stack exchange，提问作者Tanasos