动态样式在Angular2中不起作用

Posted 2023-03-13

【中文标题】动态样式在Angular2中不起作用

【英文标题】：Dynamic styling not working in Angular2

【发布时间】：2016-09-19 07:31:48

【问题描述】：

以下是我的工作代码，它在控制台中没有给出任何错误，并按预期打印数组项和测试标题。但不知何故动态背景样式不起作用，让我知道我在这里做错了什么。

import  Component  from '@angular/core';

@Component(
    selector: 'my-app',
    template: `
        <h1>name</h1>
        <div class="one" *ngFor="let item of colArr" style="background: item;">item</div>
    `,
    styles: [`
        .one 
            width: 100%;
            text-align: center;
            padding: 10px;
            margin: 5px;
        
    `]
)

export class HomeComponent 
    public name = 'test';
    public colArr = ['#111111', '#222222', '#333333', '#444444', '#555555', '#666666', '#777777', '#888888', '#999999'];

以下是我得到的输出 -

【参考方案1】：

不鼓励直接绑定到style（不适用于所有浏览器）。改为使用

<div class="one" *ngFor="let item of colArr" [ngStyle]="background: item">item</div>

或

<div class="one" *ngFor="let item of colArr" [style.background]="item">item</div>

【讨论】：

谢谢你的答案，但你的第一个解决方案不起作用[ngStyle]="background: item;" 虽然第二个工作正常+1

我在第一个解决方案中错过了。

不应该是这样的 - [ngStyle]="background: item" 否则它不会编译并由于;而出错

非常感谢您的反馈！一周的假期和一半的东西已经忘记了;-)