Question

使用Angular的样式绑定时div的背景颜色没有变化。代码放在下面以供参考

@Component({
  selector: 'course',
  template: `
   <div [style.backgroundColor]='red'>

   <button (click)="onClick($event)" class="btn btn-primary" [class.active]="isActive" [style.backgroundColor]='red'>Save</button>
   </div>
    `,
    styleUrls: ['./course.component.css']
  })
  export class CourseComponent {...}

style元素具有backgroundColor属性。我哪里错了？

Answer 1

Angular属性绑定需要表达式而不是您尝试分配的值。而不是[style.backgroundColor]='red'您可能想要使用[style.backgroundColor]="'red'"请注意我已经包裹了红色＆＃39;在报价上。

Answer 2

我认为你的代码中有拼写错误..

试试这个：

 [style.background-color]="'red'"

..所以像：

@Component({
  selector: 'course',
  template: `
   <div [style.background-color]='red'>

   <button (click)="onClick($event)" class="btn btn-primary" [class.active]="isActive" [style.background-color]='red'>Save</button>
   </div>
    `,
    styleUrls: ['./course.component.css']
  })
  export class CourseComponent {...}

希望它可以帮到你！

Answer 3

您需要将 [ngStyle] 与 backgroundColor 属性

一起使用

<div  [ngStyle]="{backgroundColor: 'red' }">
   <button (click)="onClick($event)" class="btn btn-primary" [class.active]="isActive" [ngStyle]="{backgroundColor: 'red' }">Save</button>
</div>

<强> DEMO STACKBLITZ

无法使用样式绑定更改Angular中的背景颜色

3 个答案: