イオン2：ngForを使用して複数の画像カードをレンダリングする方法

Question

私のアプリには2ページあり、navParamsを使用して他のページからデータオブジェクトを取得し、そのデータオブジェクトをホームページの配列に格納しています。ここでは、画像カードに

を使用して、ホームページテンプレートの配列で私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); 
} 

} 

でこれを説明するために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> 

Answer 1

ですが、私はStudeと呼ばれる新しいページを作りましたntsPage

ここ

ionic generate page Students 

は、それは付属のJavaScriptファイルに結果[]配列を探しているアプリ/ページ/学生/ 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> 

です。独自のresults []配列を作成するのはあなた次第です。この例では値をハードコードしています。

あなたは* ngFor権利をイオンカードタグに入れることができます。

私はh2タグとpタグを使用して、返されたデータを呼び出すさまざまな方法を示しました。いずれも完璧に機能します。

そして、ここではJavaScriptですが、アプリ/ページ/学生/ 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} 
     ]; 
    } 
}