Javascript 角度样式：使用覆盖动态添加背景图像

所以我有一个包含图像文件名的数组。我使用Angular，这个数组是我的组件类的一个属性

const backgroundImages = [
  'gym-background.jpg',
'home-background-2.jpg',
  'pt-background.jpeg'
];

我想使用这些图像作为卡的背景图像。我使用Angular并在模板中包含以下代码

<div class="card" [style.background-image]="determineBackground()">
  <div class="card-header">
    <h3 class="card-title">{{workout.name}}</h3>
    <fa-icon class="card-enlarge" [icon]="['fas', 'search-plus']"></fa-icon>
  </div>
</div>

因此，我返回

背景图像

样式属性的值

Math.floor（Math.random（）*this.backgroundImgs.length）

返回一个介于0和2之间的值，以随机决定使用哪个图像作为背景。不幸的是，它不能以这种方式工作，即使const chosenImage是一个有效值，我也看不到背景图像。你们能帮我看看为什么吗

完整的组件ts文件

更新代码

组成部分

export class WorkoutListItemComponent implements OnInit {

  backgroundImgs = backgroundImages;
  chosenImage: string;

  constructor(private router: Router) { }

  ngOnInit() {
    this.clientId = localStorage.getItem('userId');
    this.chosenImage = this.backgroundImgs[Math.floor(Math.random() * this.backgroundImgs.length)];
    console.log('choseImage', this.chosenImage);
  }
}

模板

<div
  class="card"
  [ngStyle]="{'background-image': chosenImage ? 'linear-gradient(to bottom right, rgba(#000,.5), rgba(#000,.5)), url(\'/assets/images/' + chosenImage + '\')' : ''}"
>
  <div class="card-header">
    <h3 class="card-title">{{workout.name}}</h3>
    <fa-icon class="card-enlarge" [icon]="['fas', 'search-plus']"></fa-icon>
  </div>
</div>

{{workout.name}

从我的评论继续：从模板调用函数将导致更改检测器在函数中循环数十次-使用

ngOnInit

或

ngAfterViewInit

并在组件上设置公共属性，然后绑定到该属性

在模板中使用以下

ngStyle

方法避免

url

清理问题，而不会带来麻烦

[ngStyle]="{
                'background-image': (chosenImage) ? 'url(' + chosenImage + ')' : ''         
            }"

---

我的评论如下：从模板调用函数将导致更改检测器在函数中循环数十次-使用

ngOnInit

或

ngAfterViewInit

并在组件上设置公共属性，然后绑定到该属性

在模板中使用以下

ngStyle

方法避免

url

清理问题，而不会带来麻烦

[ngStyle]="{
                'background-image': (chosenImage) ? 'url(' + chosenImage + ')' : ''         
            }"

---

检查错误日志，你应该有一些关于清理CSS格式不正确的地方-你在Angular之外测试过吗？您不应该从模板调用函数-它将在函数中循环数十次-使用

ngOnInit

并在组件上设置公共属性，然后绑定到that@Drenai是的，我改变了它，现在HTML是：，仍然没有背景图像，但就像@Vega说的，我确实得到了消毒错误。谢谢Vega，感谢。检查错误日志，你应该有一些关于清理CSS格式不正确的信息-你在Angular之外测试过吗？您不应该从模板调用函数-它将在函数中循环数十次-使用

ngOnInit

并在组件上设置公共属性，然后绑定到that@Drenai是的，我改变了它，现在HTML是：，仍然没有背景图像，但就像@Vega说的，我确实得到了消毒错误。谢谢Vega，谢谢。不幸的是，它仍然不起作用。我会在上面更新我的代码。所以当我只输入URL作为背景图像时，它就可以工作了，但是使用线性渐变是不可能的。我确实需要那个渐变，因为否则我就看不到我在topI上的文本了。我找到了一个替代方案，可以在背景图像上添加叠加：我添加了框阴影：插入0.2000px rgba（255,015,0.1）；到卡元素，这具有相同的效果。不幸的是，它仍然不起作用。我会在上面更新我的代码。所以当我只输入URL作为背景图像时，它就可以工作了，但是使用线性渐变是不可能的。我确实需要那个渐变，因为否则我就看不到我在topI上的文本了。我找到了一个替代方案，可以在背景图像上添加叠加：我添加了框阴影：插入0.2000px rgba（255,015,0.1）；对于卡元素，这具有相同的效果。

[ngStyle]="{
                'background-image': (chosenImage) ? 'url(' + chosenImage + ')' : ''         
            }"