Hello, I'm making an application using the IONIC framework and I'm having trouble passing parameters to another page.
I have the list of items (which are data that are coming from the database) and in each item I have a "details" button that takes me to a page with detailed information. In case I wanted to click on item1 would go to a page with details ONLY item 1, ie a page that details the item clicked. That part of taking the clicked item to a new page that I'm not getting.
below are the codes: schedule.html schedule.ts the-details.html (here is the page I want to print the details of the item clicked) the-details.ts
//schedule.ts
import { Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import { Storage } from "@ionic/storage";
//import { ConferenceData } from '../../providers/conference-data';
import { UserData } from '../../providers/user-data';
import { OsDataProvider} from '../../providers/os-data/os-data';
import {OsDetalhesPage} from "../os-detalhes/os-detalhes";
//import {OsDetalhesPage} from "../os-detalhes/os-detalhes";
@Component({
selector: 'page-schedule',
templateUrl: 'schedule.html'
})
export class SchedulePage {
username: string;
nome_cliente: string;
public lista_os = new Array<any>();
//result: any;
//users: any[];
//fullName = [];
//options: any;
//local: any;
//public location: any;
// public fullDetails: any[];
public osDetails: any;
public userDetails: any;
data: any;
//userPostData = {"email":"","name":"","user_id":""};
// login: UserOptions = { username: '', password: '' };
//userID = { codtecnico: '' };
// responseData: any;
//submitted = false;
// @ViewChild(InfiniteScroll) infiniteScroll: InfiniteScroll;
rootPage: any = SchedulePage;
constructor(
//public alertCtrl: AlertController,
public nav: NavController,
public userData: UserData,
public OSData: OsDataProvider,
public navCtrl: NavController,
//public loginData: UserData,
// public authService: AuthService,
public storage: Storage,
// public platform: Platform,
// public geolocation: Geolocation
//private geoposition: Geoposition,
//private diagnostic: Diagnostic,
//public toastCtrl: ToastController
) {
this.storage.get('userData').then((data:any) => {
const dados = JSON.parse(data);
//this.lista_os = dados;
//console.log(this.lista_os);
if (dados) {
this.userDetails = dados.userid[0].userData;
this.lista_os = dados.userid[1].OSData;
console.log(this.lista_os = dados.userid[1].OSData);
//console.log(this.osDetails = dados.userid[1].OSData[0]);
//this.userID.codtecnico = dados.userData.user_id;
}
});
}
ionViewDidEnter() {
this.getUsername();
this.getNomeCliente();
}
getUsername() {
this.userData.getUsername().then((name) => {
this.username = name;
//console.log('Name',name);
});
};
getNomeCliente(){
this.OSData.getNomeCliente().then((name) => {
this.nome_cliente = name;
});
};
abrirDetalhes(){
this.navCtrl.push(OsDetalhesPage);
};
}
//---------------------------------------------------------------//
//os-detalhes.ts
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the OsDetalhesPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@Component({
selector: 'page-os-detalhes',
templateUrl: 'os-detalhes.html',
})
export class OsDetalhesPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad OsDetalhesPage');
}
}<!-- Schedule.html -->
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>OS</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div padding >
<ion-card *ngFor="let e of lista_os">
<ion-card-content>
<b> Id: </b> {{e.id_os}}<br>
<b> Nome Cliente: </b>{{e.nome_cliente}} <br>
<b> Data: </b>{{e.data_agenda}} <br>
</ion-card-content>
<button ion-button block (click)="abrirDetalhes()">Detalhes</button>
</ion-card>
</div>
</ion-content>
<!-- os-detalhes.html ----------------------------- -->
<!--
Generated template for the OsDetalhesPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>Ordem de Serviço Detalhada</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card-content>
<b> Id: </b> {{id_os}}<br>
<b> Nome Cliente: </b>{{nome_cliente}} <br>
<b> Data Agendada: </b>{{data_agenda}} <br>
<b> Período do Dia: </b> <br>
<b> Prioridade: </b><br>
</ion-card-content>
</ion-content>