Question

我的离子应用程序内部有一个可观察的阵列。我正在遍历数组并尝试设置背景图像，如下所示：

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

很奇怪，这不是将图片网址设置为背景图片。因为如果我检查html，我会看到以下内容：

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

[对象对象] 当我将变量{{picture.image}}打印到我的html文件中时，我会看到很好的图像URL。看起来像这样：https://firebasestorage.googleapis.com/v0/b/someFancyApp-fd93d.appspot.com/o/yadayadayada .. 但是当我尝试将其绑定到ng样式时，它说的是[object Object] ...

我还尝试通过管道设置背景图片，例如：

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

但这也不起作用。

有人知道为什么我会看到这个吗？

Answer 1

我建议您用*ngFor标签包裹<ng-container/>，允许运行for循环以确保pictures$ | async已经解决

请在此处检查我的堆叠闪电战
https://stackblitz.com/edit/ionic-aavefm

将Observable.of更改为适合您的需求（猜测API调用）

在异步循环中设置div的背景图片

1 个答案: