Angular项目中[ngStyle]绑定navBg报错的原因求助

嗨，作为正在学习Angular的开发者，这种样式绑定的小问题确实很常见，咱们来一步步拆解你遇到的问题~

首先先把你的代码贴出来方便分析：

你的HTML代码： #

<nav class="navbar navbar-expand-lg fixed-top" [ngStyle]="navBg">

你的TypeScript代码： #

navBg: any;

@HostListener('document:scroll') scrollover() {
  if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
    this.navBg = {
      "background-color": "#000000"
    }
  }
  else {
    this.navBg = {}
  }
}

最可能的报错原因：变量未初始化 #

Angular在组件初始化渲染模板的时候，会立刻尝试解析[ngStyle]="navBg"这个绑定，但你只声明了navBg: any;却没有给它初始值，这时候navBg是undefined。而ngStyle指令要求绑定的值必须是一个键值对格式的对象（哪怕是空对象），传入undefined就会触发报错。

解决办法：给navBg初始化一个空对象 #

只需要修改TypeScript里的变量声明，给它一个初始的空对象即可，甚至可以给它更明确的类型（比any更规范）：

// 推荐：用明确的类型代替any，同时初始化空对象
navBg: { [key: string]: string } = {};

@HostListener('document:scroll') scrollover() {
  if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
    this.navBg = {
      "background-color": "#000000"
    };
  } else {
    this.navBg = {};
  }
}

其他可能的排查点（如果上面的解决办法没用的话）： #

• 检查组件类是否正确声明了navBg变量，有没有拼写错误（比如模板里写的是navBg，类里是不是写成了别的名字）
• 确认组件已经正确导入到对应的Angular模块中，没有出现组件未注册的问题

这样修改后，模板初始化时navBg是一个空对象，符合ngStyle的要求，滚动时再动态更新样式就不会报错啦~

备注：内容来源于stack exchange，提问作者Yusuf Güner