[英]Dynamically Display Images in Array of Array
How do I iterate through the array images srcs for each object in the properties array below? 如何遍历下面的属性数组中每个对象的数组图像srcs?
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? 我可以显示属性对象的ID,但是如何遍历图像src的数组以使用图像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: 物业服务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) 渲染后的元素(Rohit建议的解决方案)
Try the below code, I have iterated over property.picture
and assigned the pic
in image source. 试试下面的代码,我遍历了property.picture
并在图像源中分配了pic
。
<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>
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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.