Angular中如何根据循环项的键值切换ngClass设置按钮样式？

Hey there! I see what you're trying to do here—dynamically switch button classes based on your loop item's key value. Let's sort out the issue with your current code first, then show you the correct ways to implement this.

The Problem with Your Current Code #

You've added two separate [ngClass] bindings to the same element:

<button [ngclass]="{'btn-primary': variable.key == 'name'}" [ngclass]="{'btn-warning': variable.key != 'name'}">...</button>

Angular doesn't allow duplicate property bindings like this. Only the last one will take effect, or you might run into unexpected behavior. We need to combine these into a single [ngClass] binding.

Solution 1: Combined Object Syntax #

You can include both class conditions in a single object within one [ngClass] binding. This makes it clear which classes map to which conditions:

<button [ngClass]="{
  'btn-primary': variable.key === 'name',
  'btn-warning': variable.key !== 'name'
}">
  <!-- Your button text/content here -->
</button>

Angular will evaluate each condition and apply the corresponding class only when the condition is true.

Solution 2: Ternary Operator (Simpler for Binary Choices) #

Since this is a straightforward either/or scenario (either btn-primary or btn-warning), using a ternary expression is even more concise:

<button [ngClass]="variable.key === 'name' ? 'btn-primary' : 'btn-warning'">
  <!-- Your button text/content here -->
</button>

This reads like plain English: "If variable.key is 'name', use btn-primary; otherwise, use btn-warning."

Both approaches work perfectly—pick whichever feels more readable for your use case!

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