将样式绑定到从 ngFor 循环计算的表达式答案

【问题标题】：Binding style to expression calculated from ngFor loop将样式绑定到从 ngFor 循环计算的表达式
【发布时间】：2017-06-01 13:53:41
【问题描述】：

假设我有一个函数，可以根据随机数据中使用 ngFor 循环创建的一堆 div 的高度总和来计算从黑色到白色的颜色。

我需要计算它并将那些 div 背景颜色绑定到这个值。为了能够计算它们的所有高度，我需要在 ngAfterViewChecked() 中计算颜色并将其存储在变量中。但是将其绑定到样式显然会导致 ExpressionChangedAfterItHasBeenCheckedError。

对于这种原因有什么优雅的解决方案，或者一些解决方法吗？

【问题讨论】：

标签： angular

【解决方案1】：

你可以的

<div [style.background-color]="yourProperty">

并以您喜欢的初始背景颜色开始您的属性。稍后根据需要进行更新。

【讨论】：

我认为你没有仔细阅读我的问题。我不是在问如何将变量绑定到样式。我的问题是在更改检测后处理组件生命周期和计算变量（因为所有数据和 div 都被替换）但之后仍在更新样式。