Angular 如何使用角度6多次动态更改图像背景

我有一个“步进”表单（在这里填写一些字段，单击“下一步”，会出现一些其他字段，但它是相同的组件），我希望每个步骤都有不同的背景。这意味着每次用户单击按钮时，背景图像都必须改变

为了实现这一点，我考虑使用

@HostingBinding

如下：

@HostBinding('style.background-image')
bg_image = 'url(image_1.png)';

然后我想要一个方法，每次用户单击按钮时都会触发，如下所示：

changeBg(img): void {
    bg_image = 'url(img.png)';
}

上面的代码是伪代码，因为我有一些其他的逻辑围绕着整件事，但是问题是，一旦调用了方法，

背景图像

应该更新。关于html，我有：

<div class="page-layout simple fullwidth"
 [ngStyle]="{ 'background': bg_image }">     

这不管用。有趣的是，如果我这样做：

changeBg(img): void {
    bg_image = '';
}

---

背景图像消失。关于如何解决这个问题，有什么建议吗？

如果您想使用像as

bg\u image='class2'这样的图像https://picsum.photos/200/300“

。 您需要在模板中执行此操作

[ngStyle]="{ 'background': 'url(' + bg_image + ')' }"

---

如果你想使用像这样的图像

changeBg(img): void {
    bg_image = `url(${img})`;
}

您需要在模板中执行此操作

[ngStyle]=“背景：背景图像”

试试看

---

你试过ChangeDetectorRef.detectChanges（）吗？没有，我没有试过。你能详细介绍一下我是如何尝试的吗？你看看这个问题@ChikaLiO我已经查过了文档，并让它按照我想要的方式工作。你想添加一个回复，这样我就可以接受了吗？完成了，很高兴我能帮上忙。

changeBg(img): void {
    bg_image = `url(${img})`;
}

ChangeDetectorRef.detectChanges()