Angular 4 中 NgFor 中的 NgStyles答案

【问题标题】：NgStyles inside NgFor in Angular 4Angular 4 中 NgFor 中的 NgStyles
【发布时间】：2017-10-07 11:20:24
【问题描述】：

我想根据某些条件更改字体颜色 ==> 从通过 Http 请求返回的 observable 返回的两个数据，我在下面尝试这些代码（Typescript+Angular）

<td *ngFor="let user of userService.users | async">{{user.data.apps.details[0].label}}
          <span [style.color]="user?.data.apps.details[0].state_id as colorId 'green' : 'orange' : 'red'">

</td>

“user”是我的 Observable，“userService”是我的 http 服务，花括号 {{}} 中的数据是从 Json 对象中获取的

【问题讨论】：

你可能的意思是“users”是我的 Observable”，因为user 只是userService.users 发出的数组中的一个项目。那么问题是什么？什么没有按预期工作？
.state_id 应该有什么值？该值何时应为green、orange 或red？您的表达式不是有效代码，不清楚您要完成什么。
对不起用户而不是用户... state_id 返回 0、1 或 2，我想根据该值更改标签的颜色
所以 ngFor 正在解析我的 Json 并向我返回一个句子 = 到“标签”，然后我会根据“state_id”应用一个颜色，他也包含在 Json 中

标签： angular typescript ecmascript-6 angular2-directives rxjs5

【解决方案1】：

这不是一个有效的表达式

user?.data.apps.details[0].state_id as colorId 'green' : 'orange' : 'red'

更新

如果.state_id 返回0、1 或2，这应该是您想要的：

<span [style.color]="['green', 'orange', 'red'][user?.data.apps.details[0].state_id]">

【讨论】：

是的，我知道 Günter 我试图动态更改 css 适用于 ngFor 解析的“标签”，具体取决于“state_id”
我不确定你的评论是什么。这能解决您的问题吗？或者这不是您想要的？
例如下面的代码返回标签==> {{user.data.apps.details[0].label}} 和以下返回我的 state_id => {{user.data.apps.details[0].state_idl}} 和我想根据我的 state_id 将我的“标签”着色为 0=green 1=orange and 2=red
是的，我尝试传递您的代码，而不是 [style-color]，但我不工作......它返回任何错误，但跨度和内部代码或完全写在视图中（我不想要它，我只想让它为我的 td"label" 着色
我更新了代码以包含整个标签。你是这样用的吗？