angular - 使用 ngFor 的内联样式背景图像

Question

我正在尝试为 ngFor 循环中的每个 div 设置背景图像。在我循环的 JSON 中，我有一个属性 property.Image包含图像的 url 字符串。 <img src={{flag.properties.Image}}/>有效，但我试图将图像显示为背景图像的尝试无效。在浏览器检查器中，div 背景图像显示为 {{flag.properties.Image}} 而不是读取我试图指向的 url。我究竟做错了什么？

<h3>Top Flags</h3>
<div class="grid grid-pad">
  <div *ngFor="let flag of flags" (click)="gotoDetail(flag)" class="col-1-4">
    <div class="module flag" style="background-image: url({{flag.properties.Image}})">
      <h4>{{flag.id}}</h4>
      <div><img src={{flag.properties.Image}} height="50px" /></div>
      <div>{{flag.properties.Adaptation}}</div>
    </div>
  </div>
</div>

Answer 1

改用

[style.background-image]="'url('+flag.properties.Image+')'"

另见 In RC.1 some styles can't be added using binding syntax