Angular 使用ngStyle绑定时，绑定变量绑定为null

我正在尝试使用ngStyle设置背景图像

<div  class="artist-banner fluid-banner-wrapper" [ngStyle]="{'background-image':  'url(../imgs/banner/' + event?.category + '.jpg)'  }">

当类别是一个单词时，它工作，但当它有两个单词时，它不工作，它绑定为null

---

例如，当它作为“一级方程式”出现时，它绑定为null。有什么问题吗？

带有空格的URL不会直接被解释， 试试这个

在组件中

alertStyles = {
        'background-image':  'url(../imgs/banner/' + this.event?.category.replace(" ", "%20") + '.jpg)'
      };

例如：

@Component({
  selector: 'app-style-example',
  template: `
    <div  class="artist-banner fluid-banner-wrapper" [ngStyle]="alertStyles">
  `
})
export class StyleExampleComponent {

  alertStyles = {
    'background-image':  'url(../imgs/banner/' + this.event?.category.replace(" ", "%20") + '.jpg)'
  };
}

@组件({
选择器：“应用程序样式示例”，
模板：`
`
})
导出类StyleExampleComponent{
alertStyles={
“背景图像”：“url（../imgs/banner/”+this.event？.category.replace（“，“%20”）+”.jpg）”
};
}

编辑：如果你正在循环事件，你应该传递事件参数

   @Component({
      selector: 'app-style-example',
      template: `
        <div  class="artist-banner fluid-banner-wrapper" [ngStyle]="changeStyle(event)">
      `
    })
    export class StyleExampleComponent {


    }



  changeStyle(event) {
    return {
        'background-image':  'url(../imgs/banner/' + event?.category.replace(" ", "%20") + '.jpg)'
    }
  }

@组件({
选择器：“应用程序样式示例”，
模板：`
`
})
导出类StyleExampleComponent{
}
更改样式（事件）{
返回{
“背景图像”：“url（../imgs/banner/'+event？.category.replace（“，“%20”）+'.jpg）”
}
}

这是Angular2您标记的angularangular是Angular2这是在循环中吗？根据您的示例，事件来自哪里？你的回答完全偏离了主题