属性绑定到样式

Question

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

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-->

保存图像的代码：

rooms:[
      {
        pk: 1,
        name: 'no',
        description: 'no',
        privacy: 'yeah',
        image: ['nifty porno image'],
        seatedcapacity: 2,
        standingcapacity: 2,
        amenities:['k'],
        setuptypes:['k'],
        filtercompliantroom: false
      },
    ]

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

我试过了

style=" background-image: url({{room.image[0]}});"> 失败了

[style]=" background-image: url(room.image[0]);"> 也失败了

[style.background-image]="url(room.image[0])"也失败了

[ngStyle]="{'background-image': 'url('room.image[0]')'}"失败

建议？

目前正在查看此页面以查看是否可以找到答案：https://www.concretepage.com/angular-2/angular-2-ngstyle-and-style-binding-example

Answer 1

这很可能是由于 Angular 防止跨站点脚本的内置功能。看到这个 link：https://angular.io/guide/security#xss

更新

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

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

这使用 ngStyle 属性，即 "safe" 而不是 style 属性。

这就是您需要的样子：

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

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

属性绑定到样式

property binding to style

angular

for-loop

property-binding

属性 绑定到样式

property binding to style

angular

for-loop

property-binding

属性绑定到样式