Question

我的应用程序中有两个页面，我使用navParams从其他页面获取数据对象并将该数据对象存储在主页的数组中，我想使用图像卡将数组中的数据显示到主页模板

这是我的主页。

@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

为了说明这一点，我创建了一个名为StudentsPage的新页面

ionic generate page Students

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

它正在随附的JavaScript文件中查找results []数组。您可以自行填充自己的results []数组。我为此示例设置了硬编码值。

您会发现只需将* ngFor放入离子卡标签即可。

我使用了h2和p标签来显示您可以调用返回数据的不同方法。要么完美地运作。

这里是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} 
      ];
  }
}

Ionic 2：如何使用ngFor渲染多张图像卡

1 个答案: