Question

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

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

当类别是一个单词时它起作用，但当它有两个单词时它不起作用，它绑定为空

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

Answer 1

带空格的网址不会被直接解释，试试这个，

<div class="artist-banner fluid-banner-wrapper" [ngStyle]="alertStyles">

在组件中，

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)'
  };
}

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

   @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)'
    }
  }

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

1 个答案: