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

Question

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

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

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

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

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

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

有什么优雅的方法可以解决这个问题吗？

感谢您的帮助。

Answer 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
        };
    }
}

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

Angular2 use *ngif to set class name in html code

classname

angular-ng-if

angular