Angular 属性绑定到样式

我有一个显示图像的for循环。该图像是其容器的背景图像

图像在for循环的每次迭代中都会发生变化

守则：

<div class="row">
      <h4 id="rooms"><strong>Rooms</strong></h4>
      <button id="roomlinkbutton" class="linkbutton">+Room</button>
    </div>
    <div class="row" id="roomsrow"> <!--room row-->
      <div *ngFor="let room of venueprofileobject.rooms; let i=index" class="col-md-4"> <!--room item-->
        <div class="imagecontainer img-responsive imagefullheight"
             [style]=" background-image: url(room.image[0]);">
        </div>
        <h5 class="roomnameprivacy"><strong>{{room.name}} | {{room.privacy}}</strong></h5>
        <button (click)="deleteroom(i)" class="deleteroom btn-danger">Delete</button>
      </div> <!--room item-->

但我不确定如何将背景图像url值与图像位置绑定

我试过了

style=“background image:url（{{room.image[0]}}）；”>

哪个失败了

[style]=“背景图像：url（room.image[0]）；”>

这也失败了

[style.background image]=“url（room.image[0]）”

也失败

[ngStyle]=“{'background-image'：'url（'room.image[0]'）”}”

失败

建议

---

目前正在查看此页面，以查看是否可以找到答案：

这很可能是由于Angular的内置功能防止跨站点脚本编写。请参阅此链接：

更新

我能够使用如下语法使其工作：

<div class="row" [ngStyle]="{'background-image': 'url(' + imageUrl + ')'}">

---

冒号（：）右侧的语法基本上是建立一个字符串，因此您需要添加“+”来连接样式文本（例如“url”）和组件属性的值。

是有意义的，但我已经硬编码了url，它可以找到。谢谢你，伙计，但我不认为会是这样！对于硬编码url，跨站点脚本不是问题。你看链接了吗？我看了。对我再看看。但如果这是问题所在，我仍然需要链接。是否存在修复？angular已转义该值。但仍然允许url。再说一遍。我不确定这是否准确。您缺少加号。我在上面的答案中添加了您的语法。

<div class="row" [ngStyle]="{'background-image': 'url(' + imageUrl + ')'}">

<div class="row" [ngStyle]="{'background-image': 'url(' + room.image[0] + ')'}">