Блог

Главная - Вопросы по программированию - Как я могу установить интерполированное значение в качестве свойства стиля в Angular?

Как я могу установить интерполированное значение в качестве свойства стиля в Angular?

#css #angular

#css #angular

Вопрос:

Перед созданием этого вопроса я прочитал все существующие вопросы, и ни один из ответов не устранил мою проблему.

Ну, я извлекаю данные из 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

На картинке вы можете увидеть сетку альбомов с названием альбома, именем исполнителя и ссылкой на файл обложки альбома, который должен быть фоновым изображением нажмите здесь

Ответ №1:

Вам не хватает url() части.

Попробуйте следующее (как показано в вашем репозитории)

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