I am unable to open a page upon clicking it in side menu.
This is my app.component.ts:
this.pages = [
{ title: 'NFC Page', component: NfcPage, note: 'NFC Page' },
{ title: 'Student Details', component: StudentDetails, note: 'Student Details' },
];
This is my app.module.ts:
#NgModule({
declarations: [
StudentDetails,
NfcPage,
],
entryComponents: [
StudentDetails,
NfcPage,
],
This is my nfc.ts page:
import {Component} from '#angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {NFC, Ndef} from '#ionic-native/nfc';
#IonicPage()
#Component({
selector: 'page-nfc',
templateUrl: 'nfc.html',
})
export class NfcPage {
constructor(public navCtrl: NavController,
public navParams: NavParams,
private nfc: NFC,
private ndef: Ndef) {
}
}
This is my nfc.html page:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>NFCPage</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>NFC Page!</p>
</ion-content>
Student details page opens fine but when I click "Nfc page", nothing happens.
for open the page through the side menu you need to make that page as a rootpage when you click on the side menu option.You may find the below code:-
app.html:
<ion-menu id="myMenu" [content]="mycontent" >
<ion-content>
<ion-list>
<ion-item ion-item small menuClose (click)="nav.setRoot(pages.nfc)">
<ion-icon name="home" item-left menuClose ></ion-icon> NFC
</ion-item >
<ion-item small menuClose (click)="nav.setRoot(pages.std_detils)">
<ion-icon ios="ios-contact" md="ios-contact" item-left ></ion-icon> Student Details
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #mycontent [root]="rootPage"></ion-nav>
app.component.ts:
this.rootPage = NfcPage;
this.pages = {
"nfc": NfcPage,
"std_detils": StudentDetails,
};
I have managed to find a solution. The problem is in the constructor of nfc.ts module. The two private parameters (private nfc: NFC and private ndef: Ndef) seem to be broken from the plugin that I am using. I removed these two parameters from the constructor and I was able to open the page. Sadly there was no exception thrown in the console or anywhere else. Hope it helps someone.
Related
I have the following code:
<ion-item *ngFor="let box of boxes">
This will show results from array:
On the .ts file i have the following:
isApproved : boolean;
public box: any;
This will generate from boxes array:
box1 -> [id, name, isApproved]
box2 -> [id, name, isApproved]
box3 ->[id, name, isApproved]
I need to get the isApproved value of each box, so when i activate the toggle, isApproved will change in database.
I know one method that doesn't fits my needs, like clicking and getting the id from route but i want to open a new page for that.
Just put and ngModel in the ion-toggle:
html:
<ion-item *ngFor="let box of boxes">
<ion-avatar slot="start"></ion-avatar>
<ion-label>...</ion-label>
<ion-toggle [(ngModel)]="box.isApproved" (ionChange)="approvedToggled($event)"></ion-toggle>
</ion-item>
ts:
approvedToggled(event, box) {
if(event.detail.value) {
// save to box to database
}
/* or:
if(item.isApproved) {
// save to database
}
*/
}
The solution is very simple.
The working code is:
On my HTML:
<div *ngFor="let box of boxes">
<ion-item-sliding id="anyId">
<ion-item>
<ion-avatar slot="start">
<img [offset]="100" [alt]="box.user?.name"
defaultImage="./assets/img/photo.png" [lazyLoad]="box.user?.photo?.url()" />
</ion-avatar>
<ion-label class="ion-text-wrap">
<ion-text color="dark">
<h3 class="bold no-margin">
{{ box.user?.name }}
</h3>
</ion-text>
</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option color="primary" (click)="onDelete(box)">
<ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</div>
On my TS i have:
Importing service:
import { Box } from '../../services/box-service';
Before constructor:
public boxes: Box[] = [];
public box: Box;
constructor(private BoxService: Box) {
super(injector);
}
Loading boxes from service:
async loadDataFromService() {
try {
const boxes = await this.boxService.loadBoxes(this.params);
for (let box of boxes) {
this.boxes.push(box);
}
this.onRefreshComplete(boxes);
} catch {
}
}
... this will return an array with arrays. Each array has an object.
Now we just access each box from HTML (click)="onDelete(box)"
async onDelete(box: Box) {
await Swal.fire({
title: 'Are you sure?',
text: 'Blah, blah',
icon: 'warning',
iconColor: '#5038de',
showCancelButton: true,
confirmButtonColor: '#5038de',
cancelButtonColor: '#e0b500',
confirmButtonText: 'Yes',
cancelButtonText: 'No',
heightAuto: false,
showClass: {
popup: 'animated fade-in'
},
hideClass: {
popup: 'animated fade-out'
}
}).then(async (result) => {
if (result.value) {
await this.boxService.deleteBox(box)
this.goTo()
} else {
this.goTo()
}
});
}
}
Resuming, the solution for:
<ion-item *ngFor="let box of boxes">
<ion-avatar slot="start"></ion-avatar>
<ion-label>...</ion-label>
<ion-toggle (ionChange)="myFunction(box)"></ion-toggle>
</ion-item>
was simply (ionChange)="myFunction(box)" or (click)="myFunction(box)"
In my case box will be an entire object, passing the id will be enough to perform any action.
I have a page which contains a combobox. Each item in the combobox have 3 page titles. so when I select one of the item from it and click next button it should move to respective page
Html file:
<ion-header>
<ion-navbar>
<ion-title>REGISTRATION</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<h1>Step 1 : Choose the category</h1>
<ion-item>
<ion-label>Category</ion-label>
<ion-select [(ngModel)]="category">
<ion-option value="i">Individual</ion-option>
<ion-option value="t">3rd party</ion-option>
<ion-option value="d">Dedicated</ion-option>
</ion-select>
</ion-item>
<div *ngIf="category==='i'"><p>Show individual desc</p></div>
<div *ngIf="category==='t'"><p>Show 3rd Party desc</p></div>
<div *ngIf="category==='d'"><p>Show Dedicated desc</p></div>
</ion-content>
<ion-footer no-shadow class="foot">
<ion-toolbar position="bottom">
<button (click)="rg()" ion-button full color="primary"
block>Next</button>
</ion-toolbar>
</ion-footer>
ts file:
import { Component } from '#angular/core';
import { NavController, AlertController, LoadingController, Loading,
IonicPage } from 'ionic-angular';
import { ObsAuthService } from '../../services/obs_auth.services';
import { ConnectrgPage} from '../connectrg/connectrg';
import { IndividualregPage } from '../individualreg/individualreg';
#Component({
selector: 'page-connectreg',
templateUrl: 'connectreg.html',
providers: [ObsAuthService]
})
export class ConnectregPage {
constructor(private nav: NavController, private auth: ObsAuthService,
private alertCtrl: AlertController, private loadingCtrl:
LoadingController) {}
selectChange(e) {
console.log(e);
}
public rg(){
this.nav.push(IndividualregPage);
}
}
I have the respective page names in the combobox.
I would like that when I click on any item in my list, only show the data of this item on the new page. I can already display the items from page 1 to page 2, but I can not filter. Could someone help me with this?
HTML p1
<ion-segment-button value="Todosgastronomia" class="todos-button"
(click)="selecionaprodutoscategoria(1)">
Todos
</ion-segment-button>
<ion-list *ngSwitchCase="'Todosgastronomia'">
<ion-item no-lines *ngFor="let produto of
produtos(click)="querocomprar()" no-padding>
<ion-thumbnail item-start>
<img src="assets/imgs/mmsszjm.png" class="imgast">
</ion-thumbnail>
<ion-row class="rowclass">
<h3 class="nomproduto"> {{produto.nom_produto}} </h3>
<h3 class="nomsubcategoria">{{produto.nom_subcategoria}} </h3>
<h3 class="descproduto"> {{produto.desc_produto}} </h3>
<h3 class="descdesconto"> {{produto.desc_desconto}}</h3>
<h3 class="valproduto">
<font color="#179c90">R$</font> {{produto.val_produto}}
</h3>
<button ion-button small end class="favproduto">
<ion-icon name="icon-ico_favoritos"></ion-icon>
</button>
<button ion-button class="querotodos">QUERO!
</button>
</ion-row>
</ion-item>
</ion-list>
TS p1
export class HomePage implements OnInit {
videoOptions: VideoOptions;
videoUrl: string;
public regioes: Regiao[];
produtos: Produto[];
querocomprar(produto: number) {
this.navCtrl.push(ConteudoprodutoPage, {
val: this.produtos
})
}
TS p2
export class ConteudoprodutoPage {
produto: Produto;
constructor(private payPal: PayPal, public navCtrl: NavController, public
navParams: NavParams) {
this.produto = navParams.get("valor");
}
On your ion-item just pass the produto as a param
<ion-item no-lines *ngFor="let produto of produtos" (click)="querocomprar(produto)" no-padding>
And on your querocomprar() method on HomePage, get the produto item
querocomprar(produto: any) {
this.navCtrl.push(ConteudoprodutoPage, {'val': produto})
}
Receive the val param data on your ConteudoprodutoPage class
constructor(private payPal: PayPal, public navCtrl: NavController, public navParams: NavParams) {
this.produto = navParams.get("val");
}
I am new to Ionic 2 / Angular 2 and I have been trying to fix a simple issue for an app I am building but have found no solution so far.
I am simply trying to fetch data from a json file to list a number of categories (film titles) and display more detail (production details) into a detail page. The details (director and producer) are nested within an array (production) in the json file.
Although I am able to fetch the film tiles from the json file, I am not able to accesss and display the data from the nested array once the detail page is open.
I have tried a lot of different things (including looping through the array using for Each, creating a production object) but nothing seems to be working. Unless I am missing something very obvious?
Can someone please help?
Thanks in advance! (I will be eternally grateful for any response.)
home.ts
export class HomePage {
films: any;
productions: any;
constructor(public navCtrl: NavController, public http: Http) {
this.films = this.http.get("assets/data/results-data.json").map(res => res.json());
}
openDetails(film) {
this.navCtrl.push('FilmDetailsPage', {film: film});
}
}
home.html
<ion-list>
<button ion-item *ngFor="let film of films.results" (click)="openDetails(film)">
{{ film.title }}
</button>
</ion-list>
results-data.json (extract)
{
"results": [
{
"title": "A New Hope",
"production": [
{
"director" : "George Lucas",
"producer" : "Rick McCallum"
}
]
},
{
"title": "Attack of the Clones",
"production": [
{
"director": "George Lucas",
"producer": "Kurtz"
}
]
},
film-detail.html
<ion-header>
<ion-navbar color="primary">
<ion-title>{{ film.title }}</ion-title> // Working
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card>
<ion-card-content>
**{{ production.director }} // Not working**
</ion-card-content>
</ion-card>
</ion-content>
film-detail.ts
export class FilmDetailsPage {
film: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.film = this.navParams.get('film');
}
}
Can you try this, I think there is a problem with your path:
film-detail.html
<ion-header>
<ion-navbar color="primary">
<ion-title>{{ film.title }}</ion-title> // Working
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card>
<ion-card-content>
{{ film.production[0].director }}
</ion-card-content>
</ion-card>
</ion-content>
To make ajax request in angular
this.http.get("assets/data/results-data.json").subscribe(data => {
// Read the result field from the JSON response.
this.films = data['results'];
});
You Should try this:
<ion-content padding>
<ion-card>
<ion-card-content>
{{ film.production[0]?.director }}
</ion-card-content>
</ion-card>
</ion-content>
I was having the same problem but I solved my problem by using the above code. And it renders the html first so that's why error and by using the ?, it will solve the problem.
hi i cant access my data in localstorage , it always gives me error . i need help in displaying my datas in my home . thank you for your help :)
Error:
Typescript Error
Argument of type 'Promise' is not assignable to parameter of type 'string'.
this.user = JSON.parse(this.storage.get(this.key));
prompt.present();
Typescript
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams, ViewController, AlertController } from 'ionic-angular';
import {Storage} from '#ionic/storage';
/**
* Generated class for the CrudPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-crud',
templateUrl: 'crud.html',
})
export class CrudPage {
user: any = [] ;
key: any;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public viewCtrl: ViewController,
public alertCtrl: AlertController,
public storage: Storage) {
this.storage.forEach( (value) => {
this.user.push(value);
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad CrudPage');
}
add() {
let prompt = this.alertCtrl.create({
title: 'Add User',
message: "Enter information of the user",
inputs: [
{
name: 'name',
placeholder: 'name'
},
{
name: 'password',
placeholder: 'password'
},
],
buttons: [
{
text: 'Cancel',
handler: data => {
console.log('Cancel clicked!');
}
},
{
text: 'Save',
handler: data => {
let key = data.name + data.password;
this.storage.set(key, JSON.stringify(data));
console.log(data);
}
}
]
});
this.user = JSON.parse(this.storage.get(this.key));
prompt.present();
}
delete(key){
this.storage.remove(key);
}
update(key){
}
}
HTML
<!--
Generated template for the CrudPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>Crud</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button clear icon-start color="dark" (click)="add()">
<ion-icon name="add-circle">Add User</ion-icon>
</button>
<br>
<ion-grid text-center>
<ion-row>
<ion-col width-100>
USERS
</ion-col>
</ion-row>
<ion-row>
<ion-col width-33>
<strong>User Name</strong>
</ion-col>
<ion-col width-33>
<strong>Password</strong>
</ion-col>
<ion-col width-33>
<strong>Action</strong>
</ion-col>
</ion-row>
<ion-row *ngFor="let users of user" text-center>
<ion-col width-33>
<p>{{users.name}}</p>
</ion-col>
<ion-col width-33>
<p>{{users.password}}</p>
</ion-col>
<ion-col width-33>
<button ion-button clear icon-start color="dark" (click)="delete(users.name+users.password)">
<ion-icon name="trash"></ion-icon>
</button>
<button ion-button clear icon-start color="dark" (click)="update(users.name+users.password)">
<ion-icon name="create"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Please help :) Thank you very much :)
this.storage.get(this.key) returns a promise, you have to do that:
this.storage.get(this.key).then(value => {
this.user = JSON.parse(value);
});
https://ionicframework.com/docs/storage/