Angular 2中ngClass仅加载多类字符串中单个类的问题

Hey there! I see the problem with your ngClass implementation—let's break it down and fix it right away.

The Root Cause #

When you use the object syntax for ngClass, Angular treats each key in the object as a single CSS class name. In your code, you're passing a string with multiple space-separated classes as the key (like 'btn btn-success m-btn m-btn--pill'). Angular doesn't split this string into individual classes—it just tries to apply one big class name with spaces (which isn't valid CSS, hence only part of it seems to work, or none at all).

Solution 1: Split Classes in Object Syntax (Most Maintainable) #

Separate each class into its own key in the object. Keep shared classes always active, and toggle only the unique ones based on value:

<label 
  [ngClass]="{
    'btn': true,
    'm-btn': true,
    'm-btn--pill': true,
    'btn-success': value === 2,
    'btn-outline-success': value !== 2
  }"
>
  <!-- Your label content here -->
</label>

This way, Angular correctly applies each individual class, and you only toggle the specific class that changes between states.

Solution 2: Use Ternary Expression (Simpler for Two States) #

If you prefer a more concise approach, use a ternary operator to return the full class string directly. Angular will properly parse the space-separated classes when you bind a string to ngClass:

<label 
  [ngClass]="value === 2 ? 'btn btn-success m-btn m-btn--pill' : 'btn btn-outline-success m-btn m-btn--pill'"
>
  <!-- Your label content here -->
</label>

This works because you're binding a single string value (not an object), and Angular knows to split that string into individual classes.

Solution 3: Array Syntax with Ternary (Clean & Scalable) #

Another option is to use an array to hold shared classes, then append the dynamic class with a ternary:

<label 
  [ngClass]="['btn', 'm-btn', 'm-btn--pill', value === 2 ? 'btn-success' : 'btn-outline-success']"
>
  <!-- Your label content here -->
</label>

This keeps your shared classes grouped and makes the dynamic part obvious.

Any of these solutions will fix your issue—pick the one that fits your code style best!

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