Looks like placing ion-grid
inside ion-item
is not allowed in ion-list
. Below is the code.
<ion-navbar primary *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Orders</ion-title>
</ion-navbar>
<ion-content>
<ion-list>
<ion-item *ngFor="let order of orders">
<ion-grid>
<ion-row>
<ion-col>
<ion-icon name="pie" item-left></ion-icon>
</ion-col>
<ion-col>
<ion-label>{{order.number}}</ion-label>
<ion-label>{{order.quantity}}</ion-label>
</ion-col>
<ion-col>
<ion-label>{{order.productType}}</ion-label>
<ion-label>
<ion-icon name="calendar"></ion-icon>{{order.date}}</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-list>
</ion-content>
import {NavController} from 'ionic-angular';
import {OrderDetailsPage} from '../order-details/order-details';
import {Component} from "@angular/core";
/*
Generated class for the OrdersPage page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
templateUrl: 'build/pages/orders/orders.html',
})
export class OrdersPage {
productTypes: Array<any>;
statuses: Array<any>;
orders: Array<any>;
constructor(public nav: NavController) {
this.productTypes = [{ id: 1, name: "Sand" }, { id: 2, name: "Gravel" }, { id: 3, name: "Crushed Stones" }];
this.statuses = [{ id: 1, name: "Approved" }, { id: 2, name: "Rejected" }, { id: 3, name: "Delivered" }];
this.orders = [
{ id: 1, number: "FOYER-01", productType: "Sand", quantity: "1500", date: "16-05-2016" },
{ id: 2, number: "FOYER-02", productType: "Gravel", quantity: "3500", date: "17-05-2016" },
{ id: 3, number: "FOYER-03", productType: "Plaster Sand", quantity: "4500", date: "19-05-2016" },
{ id: 4, number: "FOYER-04", productType: "Plaster Sand", quantity: "1500", date: "25-05-2016" },
{ id: 5, number: "FOYER-05", productType: "Plaster Sand", quantity: "500", date: "23-05-2016" },
{ id: 6, number: "FOYER-06", productType: "Crushed Stones", quantity: "1000", date: "24-05-2016" },
];
}
showOrderDetails(order) {
this.nav.push(OrderDetailsPage, { order: order });
}
}
Below is the result