Ionic 2: How to render multiple image card using ngFor

问题

There are two pages in my app and I'm using navParams to get data object from other page and storing that data object in and array of homepage, I want to display data in the array to homepage template using image card

Here is my homepage.ts

@Page({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {

array: any[];
record : any;
information : any;



constructor(public nav : NavController, 
public navparams : NavParams,    public platform: Platform){

    this.array = [];
    this.nav = nav;
    this.navparams = navparams;
    this.platform = platform;
    this.record = navparams.get("arrayOf");
    this.array.push(this.record);
    console.log(this.array)

}

gotopage(){
    this.nav.push(SecPage);
}

}

Here is homepage.html

<ion-navbar *navbar>
<ion-title>
Student Managment App
</ion-title>
</ion-navbar>
<ion-content>
<button danger block (click)= "gotopage()">Add Student</button>
</ion-content>

回答1:

To illustrate this, I made a new page called StudentsPage

ionic generate page Students

Here is app/pages/students/students.html

<ion-navbar *navbar>
  <ion-title>Students</ion-title>
</ion-navbar>

<ion-content padding class="students">

    <ion-card *ngFor="#result of results" class="advanced-background">
        <ion-icon name="happy" item-left></ion-icon>
        <h2>{{result.lastName}}, {{result.firstName}}</h2>
        <p [innerText]="result.age"></p>
    </ion-card>

</ion-content>

It is looking for a results[] array in the accompanying JavaScript file. It will be up to you to populate your own results[] array. I've hard-coded values for this example.

You'll see that you can just put the *ngFor right into the ion-card tag.

I've used the h2 and p tags to show the different ways you can call on the returned data. Either works perfectly well.

And here's the JavaScript, app/pages/students/students.js

import {Page, NavController} from 'ionic-angular';

@Page({
  templateUrl: 'build/pages/students/students.html',
})
export class StudentsPage {
  static get parameters() {
    return [[NavController]];
  }

  constructor(nav) {
    this.nav = nav;
    this.results = this.getResults();
  }

  getResults() {
      return [
        {"firstName": "Abe", "lastName": "Lincoln", "age": 12},
        {"firstName": "George", "lastName": "Washington", "age": 13},
        {"firstName": "Thomas", "lastName": "Jefferson", "age": 14} 
      ];
  }
}

来源：https://stackoverflow.com/questions/36118657/ionic-2-how-to-render-multiple-image-card-using-ngfor

标签

javascript

ionic-framework

ionic2

ionic-view