Angular 4 @HostBinding绑定style属性报错：无法设置未定义的backgroundColor

这个错误其实很常见——本质是你试图给一个未初始化的对象属性赋值。简单说，你用来绑定元素样式的那个对象，在赋值backgroundColor之前是undefined，所以JS会报错说“无法给undefined的属性赋值”。下面给你几种常见场景的解决方案：

1. 先初始化绑定的style对象（组件类中维护样式对象） #

如果你是通过组件类里的对象绑定到元素的[style]或[ngStyle]，一定要先把这个对象初始化为空对象，而不是让它默认是undefined。

错误示例（会触发报错）： #

// 只声明类型，没有初始化，elementStyle默认是undefined
elementStyle: { backgroundColor?: string; [key: string]: any };

// 尝试赋值时触发错误
this.elementStyle.backgroundColor = '#ff0000';

正确示例： #

// 先初始化为空对象
elementStyle: { backgroundColor?: string; [key: string]: any } = {};

// 现在可以安全赋值
this.elementStyle.backgroundColor = '#ff0000';

模板里的绑定可以是：

<div [ngStyle]="elementStyle">我是带背景色的元素</div>

2. 直接绑定单个样式属性（更简单的方式） #

如果只需要控制backgroundColor这一个样式，没必要维护整个style对象，直接在模板里绑定单个属性更直观，也不会有初始化问题：

模板代码：

<div [style.backgroundColor]="currentBgColor">我是带背景色的元素</div>

组件类代码：

// 直接声明并初始化颜色变量
currentBgColor = '#00ff00';

// 后续修改颜色直接更新变量即可
changeBackgroundColor() {
  this.currentBgColor = '#0000ff';
}

3. 指令中使用Renderer2操作元素样式（适合自定义指令场景） #

如果你是在自定义指令中操作元素样式，推荐用Angular的Renderer2来设置样式，这种方式更安全，也不需要担心对象未初始化的问题：

import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core';

@Directive({
  selector: '[appSetBgColor]'
})
export class SetBgColorDirective implements OnInit {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit() {
    // 直接给元素设置背景色
    this.renderer.setStyle(this.el.nativeElement, 'background-color', '#ffff00');
  }

  // 也可以提供方法供外部调用修改颜色
  updateBgColor(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', color);
  }
}

模板中使用这个指令：

<div appSetBgColor>我是通过指令设置背景色的元素</div>

总结一下，核心就是确保你要操作的样式对象是已初始化的，或者换用更直接的单个样式绑定/Renderer2的方式，就能避免这个错误啦。

内容的提问来源于stack exchange，提问作者andrew s zachary