我目前正在嘗試顯示根據型別具有不同背景顏色的口袋妖怪串列。我想實作一個功能，其中所選口袋妖怪的邊框也顯示為金色邊框顏色。如果我一次使用它們，它們作業得很好，但我無法將它們一起使用。
我的 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' : ''">
非常感謝您的幫助！
uj5u.com熱心網友回復：
您可以使用 [className]="getType(item.type)" 和 [class.select]="item.name === selectedPokemon"
uj5u.com熱心網友回復：
<h1>Pokédex</h1>
<p [hidden]="!selectedPokemon">Geselecteerde pokemon: {{selectedPokemon}}</p>
<div >
<app-pokemon (selectedPokemon)="highlightPokemon($event)"
*ngFor="let item of pokemons"
[pokemon]="item"
[ngClass]="item.name === selectedPokemon ?
'select' : ''">
</app-pokemon>
</div>
這是作業代碼，我所做的是選擇的類將來自 ngclass 而背景類將來自 getType 函式
uj5u.com熱心網友回復：
在 html 模板中使用函式是一種不好的做法，盡量不要使用它們。但是您可以像這樣使用 ngClass 有條件地添加多個類
<div [ngClass]="[yourFunction(value), value === 2 && 'your-class']">123</div>
uj5u.com熱心網友回復：
試試這個改變：
// HTML
[ngClass]="getExpression(item, selectedPokemon)"
// TS:
getExpression(item, selectedPokemon) {
selectedPokemon = selectedPokemon?.toLowerCase();
const pokemonName = item.name.toLowerCase();
const pokemonType = item.type.toLowerCase();
switch (pokemonType) {
case 'grass': {
return `'${pokemonType}': ${pokemonName} === selectedPokemon`;
}
case 'fire': {
return `'${pokemonType}': ${pokemonName} === selectedPokemon`;
}
case 'water': {
return `'${pokemonType}': ${pokemonName} === selectedPokemon`;
}
default: {
return `'grass': ${pokemonName} === selectedPokemon`;
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/343778.html
標籤：有角的 angular-ng-类