离子2:如何使用ngFor渲染多张图像卡 [英] Ionic 2: How to render multiple image card using ngFor

问题描述

我的应用程序中有两个页面，我正在使用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>

解决方案

为了说明这一点，我创建了一个名为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文件中寻找一个result []数组.填充自己的result []数组将由您自己决定.我已经为该示例对值进行了硬编码.

您会看到，您只需将* 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} 
      ];
  }
}

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>

解决方案

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

这篇关于离子2:如何使用ngFor渲染多张图像卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！