Table in IONIC 2

Question

Table in IONIC 2

Navigation

#1 by (2 votes)

1

Hello everyone, I am new to Ionic 2 and I have some doubts about how to manipulate the tags, I am doing an exercise that on the screen I have a table like the image like I would do this table in ionic?

html html5 ionic2

asked by anonymous 22.12.2017 / 19:49

1 answer

Search DDD by city [closed] Catchable fatal error: Object of class mysqli could not be converted to string

score 2 · Accepted Answer

Basically, this would be it:

home.html:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col>Qtd</ion-col>
      <ion-col>%Total</ion-col>
      <ion-col>Valor</ion-col>
    </ion-row>
    <div *ngFor="let item of lista">
      <ion-row>
        <ion-col>{{ item.qtde }}</ion-col>
        <ion-col>{{ item.perc }}</ion-col>
        <ion-col>{{ item.valor }}</ion-col>
      </ion-row>
    </div>
  </ion-grid>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  lista=[];

  constructor(public navCtrl: NavController) {
    this.lista=[
      {qtde:1000,perc:80.2,valor:1000},
      {qtde:8500,perc:30.2,valor:2000},
      {qtde:120,perc:18.2,valor:350.52}
    ];
  }

}