Question

我想要使用一個表達式，它將檢查表達式中的任何給定值。我已成功地做到這一點有：

<h2 class="heading" [ngClass]='{"redBackground" : info?.title == "Relationships" || info?.title == "In The Anime" || info?.title == "Anime" || info?.title == "Appearance" || info?.title == "Relationships" || info?.title == "In The Anime"}'>{{ info.title }}</h2> 

尋找一個更簡潔的方法

Answer 1

這是明顯短：

<h2 class="heading" [ngClass]='{"redBackground" : ["Relationships", "In The Anime", "Anime", "Appearance", "Relationships", "In The Anime"].indexOf(info?.title) >= 0}'>{{ info.title }}</h2> 

或https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes（在IE瀏覽器不支持）

<h2 class="heading" [ngClass]='{"redBackground" : ["Relationships", "In The Anime", "Anime", "Appearance", "Relationships", "In The Anime"].includes(info?.title)}'>{{ info.title }}</h2> 

我建議將它移到TS代碼中，而不是在模板中有太多的代碼。