Question

如何为下面的属性数组中的每个对象遍历数组图像srcs？

我有以下模拟数据：

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"]
}

我能够显示属性对象中的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>

页面打字稿：

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
        );
    }
}

物业服务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]);
  }
 }

我的误会在哪里？

Elements after Render (Rohit's suggested Solution)

Answer 1

尝试下面的代码，我遍历了@Timed @GET @Path("/async") @Produces(MediaType.APPLICATION_JSON) public Response async() { Map<String, String> response = new HashMap<>(); CompletableFuture<Void> future = CompletableFuture.runAsync(() -> { try { Thread.sleep(15 * 1000); logger.info("Processing complete"); } catch (InterruptedException ie) { logger.error("Error in PingResource.async(): {}", ie.getMessage()); } }); response.put("message", "Request is under process"); return Response.ok(response).build(); }并在图像源中分配了property.picture。

pic

Answer 2

这应该有效

  <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

尝试以下代码

<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>

动态显示阵列中的图像

3 个答案: