如何根据输入值在Angular子组件中条件应用Tailwind CSS类？

我有一个列表组件：

<section class="p-10 flex flex-col gap-10">
  <p class="text-xl font-black text-blue-700">Transfer history</p>
  <div class="flex flex-col gap-10">
    @for(item of history; track item.person){
    <app-history-item
      [person]="item.person"
      [date]="item.date"
      [amount]="item.amount"
      [type]="item.type"
    ></app-history-item>
    }
  </div>
</section>

对应的子组件代码：

<div
  class="flex items-center justify-center gap-10 px-10 py-2 rounded-2xl shadow-md w-fit"
>
  <p class="font-bold text-lg">{{ person }}</p>
  <p class="text-gray-700">{{ date }}</p>
  <p class="font-bold text-lg">{{ amount }} $</p>
  <div
    class="px-6 py-1 rounded-3xl font-bold text-md w-fit items-center flex justify-items-center"
  >
    {{ type }}
  </div>
</div>

我需要在子组件中显示type的那个<div>上，根据type值动态添加Tailwind类：

• 当type为expense时添加bg-red-100 text-red-700
• 当type为income时添加bg-green-100 text-green-700

但尝试了以下两种写法均无效：

写法1：

[class]="{
      'bg-green-100 text-green-700': type === 'income',
      'bg-red-100 text-red-700': type === 'expense'
    }"

写法2：

[ngClass]="{ 'bg-green-100 text-green-700': type === 'income', 'bg-red-100 text-red-700': type === 'expense' }"

补充：我的数据源如下：

history: any[] = [
    {
      person: 'Max',
      date: '22 Jan 2022',
      amount: '200',
      type: 'Income',
    },
    {
      person: 'Kate',
      date: '24 Aug 2021',
      amount: '150',
      type: 'Expense',
    },
  ];

问题核心是大小写不匹配：数据源中type的值是首字母大写的Income/Expense，但你在判断条件里用的是小写的income/expense，导致条件永远不成立，类无法正常添加。

以下两种方法可以解决：

方法1：直接匹配数据源的大小写 #

修正判断条件中的字符串，与数据源保持一致：

<div
  class="px-6 py-1 rounded-3xl font-bold text-md w-fit items-center flex justify-items-center"
  [ngClass]="{
    'bg-green-100 text-green-700': type === 'Income',
    'bg-red-100 text-red-700': type === 'Expense'
  }"
>
  {{ type }}
</div>

方法2：统一转换为小写（更健壮） #

将type转换为小写后再判断，避免后续数据源大小写变化导致的问题：

<div
  class="px-6 py-1 rounded-3xl font-bold text-md w-fit items-center flex justify-items-center"
  [ngClass]="{
    'bg-green-100 text-green-700': type.toLowerCase() === 'income',
    'bg-red-100 text-red-700': type.toLowerCase() === 'expense'
  }"
>
  {{ type }}
</div>

额外说明：[class]语法同样适用 #

如果你更习惯使用[class]绑定，只需把上述判断逻辑替换进去即可：

<div
  class="px-6 py-1 rounded-3xl font-bold text-md w-fit items-center flex justify-items-center"
  [class]="{
    'bg-green-100 text-green-700': type.toLowerCase() === 'income',
    'bg-red-100 text-red-700': type.toLowerCase() === 'expense'
  }"
>
  {{ type }}
</div>

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