使用 Ionic / Angular 循环浏览来自 Firebase 的逗号分隔图像

Question

我在 Ionic 应用程序中循环浏览由 FireBase 中的逗号分隔的图像 URL 时遇到问题。我尝试使用 Split，但出现以下错误：

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>

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

如有任何帮助，我们将不胜感激。

Answer 1

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

将您的模板更改为以下内容

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

使用 Ionic / Angular 循环浏览来自 Firebase 的逗号分隔图像

Looping through comma separated images from Firebase using Ionic / Angular

ionic3

angular

ionic4