时间戳

首页 > 解决方案 > 使用 Ionic / Angular 遍历来自 Firebase 的逗号分隔图像

angular - 使用 Ionic / Angular 遍历来自 Firebase 的逗号分隔图像

问题描述

在我的 Ionic 应用程序中，我无法在 FireBase 中循环通过逗号分隔的图像 URL。我曾尝试使用拆分，但我收到以下错误：

TypeError: _v.context.$implicit.images.split 不是函数

以下是 JSON 响应的示例：

        {
            "U2Bpjq0ZAeh90EHA2ddMiFoSSwi2": {
                "fullName": "Robert",
                "images": [
                    "https://media-cdn.trulia-local.com/neighborhood-media-service-prod/ga/atlanta/morningside-lenox-park/2005-ga_atl_morningside_lenox_park_82753_186_256x256_cfill.jpg",
                    "http://www.katherinepelzarchitecture.com/House_Raising_files/IMG_6922.jpg",
                    "https://pbs.twimg.com/profile_images/3320058200/1bcd222ed0b888c519ac534c881a0860.jpeg"
                ],
                "jDate": "2019-07-19"
            },
            "pmH1y6oBWXcwNRi2Hlod0wPpJK72": {
                "fullName": "Chris",
                "images": [
                    "https://media-cdn.trulia-local.com/neighborhood-media-service-prod/ga/atlanta/morningside-lenox-park/2005-ga_atl_morningside_lenox_park_82753_186_256x256_cfill.jpg",
                    "http://www.katherinepelzarchitecture.com/House_Raising_files/IMG_6922.jpg",
                    "https://pbs.twimg.com/profile_images/3320058200/1bcd222ed0b888c519ac534c881a0860.jpeg"
                ],
                "jDate": "2019-07-19"
            }    
        }

这是我用来尝试拆分图像的方法

<div *ngFor="let img of (job.images.split(','))"><img src="{{ img }}" /></div>

最终结果应该是在其自己的图像元素中显示每个图像

任何帮助，将不胜感激。

标签： angularionic3ionic4

解决方案

看起来images已经是一个数组了。您可以简单地遍历它而不是splitting。

将您的模板更改为以下

<div *ngFor="let img of job.images"><img src="{{ img }}" /></div>

推荐阅读