Question

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

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

注意：“divs”随机地位于页面上，因此，使用“ngFor”在“div”上循环将不起作用。

e.g。

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

理想情况下，我会在组件内部使用循环迭代json对象，如下所示：

{{1}}

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

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>

以下是Mine和@ Gautam代码的工作示例：

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

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

Answer 2

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

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

e.OldElement

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

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

Answer 3

试试这个

.html

中的

<div *ngFor='let r of rows' [attr.id]="r.Id" [ngStyle]="getStyle(r)">
    {{ r.data }} 
</div>

在.ts

getStyle (r) {
    let style = {};
    style['background-color'] = r.color;
    return style;//this will return style object
}

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

3 个答案: