Ionic 2: So rendern mehrere Bildkarten mit ngFor

Question

Es gibt zwei Seiten in meiner App und ich benutze navParams, um Datenobjekt von anderen Seite zu bekommen und speichern dieses Datenobjekt in und Array von Homepage, möchte ich Daten anzeigen in der Anordnung zur Startseite Vorlage Bildkarte

Hier mein homepage.ts

ist

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

} 

Hier homepage.html ist

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

Answer 1

um dies zu veranschaulichen, habe ich eine neue Seite namens Stude ntsPage

ionic generate page Students 

Hier app/pages/Studenten/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> 

Es sucht nach Ergebnissen [] Array in der beigefügten JavaScript-Datei. Es liegt an Ihnen, Ihr eigenes result [] -Array zu füllen. Ich habe Werte für dieses Beispiel fest codiert.

Sie werden sehen, dass Sie einfach die * ngFor direkt in das Ion-Card-Tag stecken können.

Ich habe die h2 und p Tags verwendet, um die verschiedenen Möglichkeiten zu zeigen, wie Sie die zurückgegebenen Daten aufrufen können. Beides funktioniert sehr gut.

Und hier ist die JavaScript, App/pages/Studenten/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} 
     ]; 
    } 
}