Angular2 使用 *ngif 在 html 代码中设置类名

Posted 2023-03-16

【中文标题】Angular2 使用 *ngif 在 html 代码中设置类名

【英文标题】：Angular2 use *ngif to set class name in html code

【发布时间】：2018-10-01 15:21:57

【问题描述】：

我尝试了一些东西，因为我正在构建一个天气仪表板。

我使用 http 加载天气数据并订阅，所以我会得到一个可观察的返回，我不能像 typescript 中的数组那样通过槽来添加新属性。

例如，我想查看每个天气数据并查看某个值是否超过 70°F，并告诉天气数据项添加一个新属性“weatherdata-sun-hot”。否则它应该使用另一个类名“weatherdata-sun-normal”，我会使用它作为类名，稍后通过插值将其放入 html 中。

所以我的想法是用html模板来解决这个问题

到目前为止，我的代码在这里

<ul>
   <li *ngFor="let item of weatherdata">item.dt_txt | item.main.temp_min -> item.main.temp_max</li>
</ul>

有没有优雅的方法来解决这个问题？

感谢您的帮助。

【问题讨论】：

你需要条件类，看这个***.com/questions/35269179/…

@AliAdravi：感谢您的提示，但我看不到那里的 if/else 机制。就像如果 val 大于使用类名 x 其他类名 y 一样。你能给我一个简单的例子吗？ :-) 再次感谢。

@AliAdravi：我想出了一个我尝试过的可行解决方案：<li *ngFor="let item of weatherdata" [ngClass]="[item.main.temp_max > 17 ? 'weather-sun-hot' : 'weather-sun-normal']" >item.dt_txt | item.main.temp_min -> item.main.temp_max</li> 但对我来说，它看起来像丑陋的代码。或者你会以同样的方式实现它吗？我很困惑。

【参考方案1】：

你需要使用 ngClass 指令：

<ul>
    <li *ngFor="let item of weatherdata" [ngClass]="'weatherdata-sun-hot': item.main.temp_min > 70, 'weatherdata-sun-normal': item.main.temp_min <= 70">
        item.dt_txt | item.main.temp_min -> item.main.temp_max
    </li>
</ul>

或者你可以在组件的代码中做它并绑定它：

模板

<ul>
    <li *ngFor="let item of weatherdata" [ngClass]="tempClass(item)">
        item.dt_txt | item.main.temp_min -> item.main.temp_max
    </li>
</ul>

组件

@Component(...)
class MyComponent 
    tempClass(item): any 
        const hot = item.main.temp_min > 70;
        return 
            'weatherdata-sun-hot': hot,
            'weatherdata-sun-normal': !hot
        ;
    

【讨论】：

感谢您的观点...我应该想到的 :-) 如此简单和好。祝你有美好的一天。