Angular中如何在ngClass内同时使用函数和条件表达式？

你报错的核心原因是[ngClass]的语法使用不符合Angular规范，ngClass仅支持以下三种合法传参格式：

• 字符串：直接传入单个类名字符串
• 数组：元素为需要生效的类名字符串
• 对象：键为类名，值为布尔值，为true时对应类名生效

你第一种写大括号的对象格式里直接放函数返回值和三元表达式，不符合对象键:值的结构要求；第二种去掉大括号后用逗号分隔两个表达式，也不匹配任意一种合法格式，所以触发报错。

方案1：使用数组语法（最适配你的需求） #

直接把两个类名放在数组里即可，ngClass会自动生效所有有效类名：

<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>

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

两种方案都可以正常实现「类型对应背景色+选中态金色边框」的需求，不会再触发语法报错。

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