如何使用 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' : ''">

非常感谢您的帮助！

Answer 1

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

Answer 2

<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"
class="{{getType(item.type)}}"
           [ngClass]="item.name === selectedPokemon ? 
'select' : ''">
</app-pokemon>
</div>

这是工作代码，我所做的是选择 class 将来自 ngclass 而背景 class 将来自 getType 函数

Answer 3

在 html 模板中使用函数是一种不好的做法，尽量不要使用它们。但是您可以像这样使用 angular

中的 ngClass 有条件地添加多个 class

<div [ngClass]="[yourFunction(value), value === 2 && 'your-class']">123</div>

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

How to use a function and expression in a ngClass using Angular?

angular-ng-class

angular