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");
}
Related
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.
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/
So I have this html which dynamically creates cards using the *ngFor
<ion-card *ngFor="let numbers of [0,1,2,3]; let i = index">
<ion-card-content>
<ion-card-title clear>
Card {{i}}
</ion-card-title>
</ion-card-content>
<button ion-button block class="blockbutton" (click)="doSomething(i)">
<ion-icon [name]="iconName" class="plussign"></ion-icon>
<div> Join Room </div>
</button>
</ion-card>
And this is in my .ts
export class FeedPage {
iconName : string;
constructor(public navCtrl: NavController) {
this.iconName = 'add-circle';
}
}
public doSomething(item): void{
console.log(item);
this.iconName = 'checkmark-circle';
}
So this code, on clicking the Block Button, turns all the icons of all the Block Buttons to to checkmark-circle
How do I change only that Particular Button's icon i.e. [name] attribute to checkmark-circle.
I've succeeded in retrieving the index for that element. But how do I modify only that Particular Button ?
Have an array of iconNames.
<ion-icon [name]="iconName[i]" class="plussign"></ion-icon>
In your component side:
public doSomething(item): void{
console.log(item);
this.iconName[item] = 'checkmark-circle';
}
}
You will have to set the entire array depending on the number of cards though.
iconNames:string[]=[];
constructor(public navCtrl: NavController) {
//loop through your card count and push initial value.
iconNames.push(`add-circle`);
}
You should have different icon names for each items in the array.
First maintain an array of objects in your .ts like this:
private _array = [{"iconName" : "name1"},{"iconName" : "name2"}]; // And so on..
Now, in your .html:
<ion-card *ngFor="let numbers of _array let i = index">
<ion-card-content>
<ion-card-title clear>
Card {{i}}
</ion-card-title>
</ion-card-content>
<button ion-button block class="blockbutton" (click)="doSomething(numbers)">
<ion-icon [name]="numbers.iconName" class="plussign"></ion-icon>
<div> Join Room </div>
</button>
</ion-card>
And doSomething() will become:
public doSomething(item): void{
console.log(item);
item.iconName = 'checkmark-circle';
}
i´m having a problem with using ng-repeat. I´m using Ionic 2 with TypeScript and HTML5. I created an array of Objects where i need to access it´s attributes. It´s saying "cannot read property c.getAttribute of undefined" but when i tried to access these attributes not using ng-repeat (just typing array[0].getAttribute), everything worked fine.
Here is my code:
<ion-list>
<ion-item ng-repeat="c in card">
<ion-card class="styledRow">
<ion-item class="cardHeaderClass">
<font size="4" style="color:#FFFFFF;">{{c.getExpiration}}</font>
<p>Monthly student</p>
</ion-item>
<ion-item class="rangeSlider">
<p style="color:white">Perm</p>
<ion-badge color="blue" item-right>{{c.getPermValue}}/{{c.getTotalValue}}{{c.getDayEuro}}
</ion-badge>
</ion-item>
<ion-item class="rangeSlider">
<ion-range disabled="false" min="0" max="{{c.getTotalValue}}" step="1" [(ngModel)]="c.getPermValue" color="secondary">
<ion-icon range-left name="close" color="danger"></ion-icon>
<ion-icon range-right name="checkmark-circle-outline" color="secondary"></ion-icon>
</ion-range>
</ion-item>
<ion-row class="styledRow">
<ion-col>
<button ion-button icon-left color="#f4f4f4" clear small>
<ion-icon name="calendar"></ion-icon>
<div>Platnosť: {{c.getExpiration}}</div>
</button>
</ion-col>
</ion-row>
<div text-right="" class="styledRow">
<ion-note>Refreshed: 12.3.2017
</ion-note>
</div>
</ion-card>
</ion-item>
</ion-list>
And here is my typescript:
export class HomePage {
card: permCard[];
constructor(public navCtrl: NavController) {
this.card = new Array();
for (let i = 0; i < 2; i++){
this.card.push(new permCard("Name","Name", 33, 40, " "+"days", "12.2.2017"));
}
}
}
export class permCard{
private centerName: string;
private permName: string;
private permValue: number;
private totalValue: number;
private dayEuro: string;
private expiration: string;
constructor(public center_name: string, public perm_name: string, public perm_value: number, public total_value: number,
public day_euro: string, public expiration_date: string){
this.centerName = center_name;
this.permName = perm_name;
this.permValue = perm_value;
this.totalValue = total_value;
this.dayEuro = day_euro;
this.expiration = expiration_date;
}
get getCenterName(): string {
return this.centerName;
}
get getPermValue(): number {
return this.permValue;
}
get getPermName(): string {
return this.permName;
}
get getTotalValue(): number {
return this.totalValue;
}
get getDayEuro(): string {
return this.dayEuro;
}
get getExpiration(): string {
return this.expiration;
}
}
I don´t know, if the problem is in the array, but only the array.push worked for me for initialization of array. Please, do you have any idea, what should be the problem. TypeScript and angular is new for me, thanks.
how-to-access-object-in-array-using-ng-repeat
You cant. ng-repeat is angularjs (version 1) syntax.
Ionic 2 is built on top of angular 2.
The format for for loop in template is:
<ion-item *ngFor="let c of card">
<ion-card class="styledRow">
<!-- shortened for brevity -->
</ion-item>
Documentation ngFor
I have a
class:
export class Todo {
public id: number;
public name: string;
public isCompleted: boolean;
public dateCreated: Date;
public userName: string;
}
A service:
getTodos(): Observable < Todo[] > {
return this.http.get(this.todosUrl)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body || {};
}
In my component:
getTodos(){
this.todoService.getTodos()
.subscribe(
todos => this.todos = todos,
error => this.errorMessage = <any>error
);
}
And html file:
<div class="ui large selection animated divided list">
<a *ngFor="let todo of (todos | todoFilter:false)" class="item">
<div class="right floated content">
<div class="ui vertical animated negative button" tabindex="0">
<div class="hidden content">Delete</div>
<div class="visible content">
<i class="fa fa-trash" aria-hidden="true"></i>
</div>
</div>
</div>
<i class="minus square outline icon"></i>
<div class="content">
<div class="header">{{todo.name}}</div>
<div class="description">{{todo.dateCreated | date:"MMM-dd-yyyy"}}</div>
</div>
</a>
</div>
The problem is, when I try to use this pipe to filter the completed todos, I keep getting an error that say Cannot read property filter of undefined.
Did I do something wrong or are there any ways to filter it without using an pipe?
My pipe:
transform(allTodos: Todo[], args?: boolean){
if (allTodos === null) {
return null;
}
return allTodos.filter(todo => todo.isCompleted);
}
Thank you.
Try to replace the if (allTodos === null) to just if (!allTodos)
I think the problem is that you're getting to the .filter even while your this.todos is still empty since you're only checking that it isn't null.