angular - 如何使用 Angular 在 ngClass 中使用函数和表达式？

Question

我目前正在尝试显示具有不同背景颜色的口袋妖怪列表，具体取决于它们的类型。我想实现一个功能，其中所选口袋妖怪的边框也显示为金色边框颜色。如果我一次使用它们，它们工作得很好，但我在一起使用它们时遇到了麻烦。

我的html如下：

<h1>Pokédex</h1>
<p [hidden]="!selectedPokemon">Geselecteerde pokemon: {{selectedPokemon}}</p>
<div class="wrapper">
  <app-pokemon (selectedPokemon)="highlightPokemon($event)"
               *ngFor="let item of pokemons"
               [pokemon]="item"
               [ngClass]="{getType(item.type), item.name === selectedPokemon ? 'select' : ''}">
  </app-pokemon>
</div>

我的 getType 函数如下：

getType(pokemonType: string): string {
    pokemonType = pokemonType.toLowerCase();
    switch(pokemonType) {
      case 'grass': {
        return 'grass'
      }
      case 'fire': {
        return 'fire'
      }
      case 'water': {
        return 'water'
      }
      default: {
        return 'grass'
      }
    }
  }

我的 IDE 抱怨的错误：

我还尝试了以下方法：

[ngClass]="getType(item.type), item.name === selectedPokemon ? 'select' : ''">

非常感谢您的帮助！

标签： angularangular-ng-class

Answer 1

您可以使用 [className]="getType(item.type)" 和 [class.select]="item.name === selectedPokemon"