Установка фонового изображения div внутри цикла async for - PullRequest
Новая
       19

Установка фонового изображения div внутри цикла async for

0 голосов
/ 02 июля 2019

У меня есть наблюдаемый массив внутри моего ионного приложения.Я перебираю массив и пытаюсь установить фоновое изображение следующим образом: 

<ion-card *ngFor="let picture of pictures$ | async;"
   <div class="user-image" [ngStyle]="{'background-image': 'url(' + (picture.image)  + ')'}">
      </div>
</ion-card>

Странно, но это не установка URL-адреса в качестве фонового изображения.Потому что, если я проверяю html, я вижу следующее: 

<div _ngcontent-god-c2="" class="user-image" ng-reflect-ng-style="[object Object]"></div>

[объект объекта] Когда я просто печатаю переменную в моем html-файле, например, {{picture.image}}, я увижу URL изображения в порядке.Что выглядит примерно так: https://firebasestorage.googleapis.com/v0/b/someFancyApp-fd93d.appspot.com/o/yadayadayada.. Но когда я пытаюсь привязать это к ng-стилю, он говорит [объектный объект] ...

Я также попытался установить фоновое изображение с помощьютруба, как: 

[ngStyle]="{'background-image': 'url(' + (picture.image | async)  + ')'}"

Но это тоже не сработало.

У кого-нибудь есть идеи, почему я это вижу?

1 Ответ

0 голосов
/ 02 июля 2019

Я предлагаю вам обернуть *ngFor тегом <ng-container/>, что позволит запустить цикл for, гарантируя, что pictures$ | async уже разрешил

, пожалуйста, проверьте мой стек
https://stackblitz.com/edit/ionic-aavefm

замените Observable.of на тот, который соответствует вашим потребностям (угадайте вызов API)

...