如何设置插值，作为 Angular 中的样式属性？

Question

在创建这个问题之前，我已经阅读了所有存在的问题，但没有一个答案能解决我的问题。

好吧，我正在从 API 获取数据， {{ album.image["3"]["#text"] }} - 是指向我想设置为背景图像的 .png 文件的链接. 这是我的代码示例：

 <div class="album-grid">
    <div *ngFor="let album of albums">
      <div class="album"> <--! I want here to set a backgroundImage for each album-->
        <h4>{{ album.name }},</h4>
        <h5>by {{ album.artist.name }}</h5>
        <p>{{ album.image["3"]["#text"] }}</p> <--! this is the link to .png file I'm getting from server -->
      </div>
    </div>
  </div>

这是我尝试过的解决方案，但没有一个对我有帮助：

[style.backgroundImage]="album.image['3']['#text']"

[style]="backgroundImage: {{album.image['3']['#text']}"

[ngStyle]="{ 'backgroundImage': album.image['3']['#text'] }"

链接到我的仓库-> https://github.com/paslavskyi9roman/Spotilar

在一张图片上，您可以看到一个专辑网格，其中包含专辑名称、艺术家姓名和专辑封面文件的链接，需要作为背景图片点击这里

Answer 1

您缺少url()部分。

尝试以下操作（如您的存储库中所示）

<div class="album" [ngStyle]="{ 'backgroundImage': 'url('+ album.image['3']['#text'] + ')'}">
        <h4>{{ album.name }},</h4>
      </div>
      <h5>by {{ album.artist.name }}</h5>
    </div>