İyonik 2: ngFor kullanarak çoklu görüntü kartı oluşturma

Question

Uygulamamda iki sayfa var ve diğer sayfadaki veri nesnesini almak ve bu veri nesnesini ana sayfa dizisi içinde saklamak için navParams kullanıyorum, veri görüntülemek istiyorum anasayfa şablonuna dizide görüntü kartını İşte

kullanılarak

İşte

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

} 

<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

Bunu anlamak için homepage.html benim homepage.ts, ben Stude denilen yeni bir sayfa yapılmış ntsPage

ionic generate page Students 

İşte O beraberindeki JavaScript dosyasında bir sonuç [] dizisi aradığı

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

app/sayfaları/Öğrencilere/students.html olduğunu. Kendi sonuçlarınızı [] dizisini doldurmak size kalmıştır. Bu örnek için kodlanmış değerlerim var.

* ngFor'u doğrudan iyon kart etiketine koyabileceğinizi göreceksiniz.

Döndürülmüş verilerde arayabileceğiniz farklı yolları göstermek için h2 ve p etiketlerini kullandım. Ya mükemmel çalışır.

Ve burada aslen bu soruyu yanıtladı beri dil değişti JavaScript uygulaması/sayfalar/öğrenciler/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} 
     ]; 
    } 
}