2

我有许多动态“div”，每个都有自己的数据库中的动态“id”。在后台有一个服务以 15 秒的间隔运行，每次都会提取新数据并更新状态，每个 div 将用不同的背景颜色表示。

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

注意：“div”随机位于页面上，因此，使用“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
}

任何帮助深表感谢。提前喝彩。

4

2 回答 2

3

我想这就是你所说的:)

  1. 动态 ID
  2. 动态色彩
  3. 动态数据
<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

于 2017-10-30T06:18:48.743 回答
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;
}
)
于 2017-10-30T06:50:30.530 回答