1

我有一个显示图像的 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-->

保存图像的代码：

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

4

1 回答 1

2

这很可能是由于 Angular 的内置功能可以防止跨站点脚本。请参阅此链接：https ://angular.io/guide/security#xss

更新

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

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

这使用ngStyle“安全”的属性而不是style属性。

这就是你需要的样子：

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

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

于 2018-02-02T22:52:21.633 回答