Ionic 2: How to render multiple image card using n

问题:

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