Angular 4 动态 id 的动态样式更新

Question

我有许多动态 "divs"，每个动态 "id" 来自数据库。在后台有一个服务运行以 15 秒为间隔，每次提取新数据并更新状态，每个 div.

将用不同的背景颜色表示

PS - 我能够为特定的 "id" 做到这一点（简单），只是停留在如何为具有动态背景颜色的动态 "id" 做到这一点。

注意："divs" 随机位于页面上，因此，用 "ngFor" 在 "div" 上循环是行不通的。

例如

<div id="xxx12312" [style.background-color]="dynamicColor">1. Some data</div>
<div id="yyadsfas" [style.background-color]="dynamicColor">2. Some more data</div>
<div id="00012123" [style.background-color]="dynamicColor">3. Some even more data</div>

理想情况下，我会在组件内部包含以下内容，并像这样循环遍历 json 对象：

for(let v of rows) {
    this.elementId(v.dynId).style = v.color
}

非常感谢任何帮助。提前干杯。

Answer 1

我想这就是你所说的:)

动态 ID
动态颜色
动态数据

<div *ngFor='let v of rows' [attr.id]="v.dynId" [ngStyle]="{'background-color': v.color}">
    {{ v.data }} // assumed that v.data has your data to display
</div>

这是我的和@Gautam 代码的工作示例：

this.elRef.nativeElement.querySelector('#' + x.id).style.backgroundColor = x.color;

https://stackblitz.com/edit/angular-change-color

Answer 2

在您的构造函数中注入 ElementRef，然后您可以使用它来获取 dom 元素。

如果您的动态数据如下所示

[ { "id": "abc", "color": "red", "content": "1st div" }, { "id": "pqr", "color": "green", "content": "2nd div" }, { "id": "xyz", "color": "blue", "content": "3rd div" } ]

然后循环你的动态数据来设置div的颜色和内容。

this.dynamicData.forEach(
x=>{
this.elRef.nativeElement.querySelector('#'+x.id).style.color = x.color;
this.elRef.nativeElement.querySelector('#'+x.id).innerHTML = x.content;
}
)

Angular 4 动态 id 的动态样式更新

Angular 4 dynamic style update for dynamic ids

angular

elementref