Dynamically Display Images in Array of Array

Question

How do I iterate through the array images srcs for each object in the properties array below?

I have the following mock data:

let properties: Array<any> = [
    {
        id: 1,
        picture: ["https://s3-us-west-1.amazonaws.com/sfdc-demo/realty/house01.jpg", "https://s3-us-west-1.amazonaws.com/sfdc-demo/realty/house02.jpg", "https://s3-us-west-1.amazonaws.com/sfdc-demo/realty/house03.jpg"]
}

I am able to display the Id from the property object, but how do I iterate through the array of image srcs to dynamically created slides with the image srcs?

<ion-content>
    <ion-card *ngIf="property.id">
            <ion-slides pager>

                    <ion-slide ng-repeat="pic in picture" style="background-color: green">
                      <img src="{{property.pic}}"/>
                    </ion-slide>

                  </ion-slides>
    </ion-card>
</ion-content>

Page Typescript:

import {Component} from '@angular/core';
import {ActionSheetController, ActionSheet, NavController, NavParams, ToastController} from 'ionic-angular';
import {BrokerDetailPage} from '../broker-detail/broker-detail';
import {PropertyService} from '../../providers/property-service-mock';

@Component({
    selector: 'page-property-detail',
    templateUrl: 'property-detail.html'
})
export class PropertyDetailPage {

    property: any;

    constructor(public actionSheetCtrl: ActionSheetController, public navCtrl: NavController, public navParams: NavParams, public propertyService: PropertyService, public toastCtrl: ToastController) {
        this.property = this.navParams.data;
        propertyService.findById(this.property.id).then(
            property => this.property = property
        );
    }
}

Property Service TS:

import {Injectable} from '@angular/core';
import properties from './mock-properties';

@Injectable()
export class PropertyService {

  favoriteCounter: number = 0;
  favorites: Array<any> = [];

  findAll() {
    return Promise.resolve(properties);
  }

  findById(id) {
    return Promise.resolve(properties[id - 1]);
  }
 }

Where is my misunderstanding?

Elements after Render (Rohit's suggested Solution)

Answer 1

Try the below code, I have iterated over property.picture and assigned the pic in image source.

        <ion-card *ngIf="property.id">
            <ion-slides pager>

                    <ion-slide ng-repeat="pic in property.picture" style="background-color: green">
                      <img src="{{pic}}"/>
                    </ion-slide>

                  </ion-slides>
    </ion-card>

Answer 2

this should work

  <ion-content>
    <ion-card *ngIf="property.id">
      <ion-slides pager>

        <ion-slide *ngFor="let pic of property.picture" style="background-color: green">
          <img src="{{pic}}"/>
        </ion-slide>

      </ion-slides>
    </ion-card>
  </ion-content>

Answer 3

Try the below code

<ion-card *ngIf="property.id">
            <ion-slides pager>

                    <ion-slide ng-repeat="pic in property.picture" style="background-color: green">
                      <img [src]="pic"/>
                    </ion-slide>

                  </ion-slides>
    </ion-card>