I am querying a set of data from firebase and successfully pulled a list of data to my html page. Is there any way to reference the corresponding item.uid value from the html page in my onViewProfile function so that I can push it to another page? Thanks.emphasized text
HTML file
<ion-content padding>
<ion-label>Type</ion-label>
<ion-select [(ngModel)]="type" (ionChange)="searchPitchesByType(type)">
<ion-option value="test1">test1</ion-option>
<ion-option value="test">test</ion-option>
</ion-select>
<ion-list>
<ion-item *ngFor="let item of pitches | async">
Name: {{ item.name }}
<p>
Description:{{ item.description }}
</p>
<p>
uid:{{ item.uid }}
</p>
<button right ion-button icon-only (click)="onViewProfile()">
<ion-icon name="add"></ion-icon>
</button>
</ion-item>
</ion-list>
</ion-content>
TS file
export class DiscoverPage {
public pitches: FirebaseListObservable<any>;
constructor(
private navCtrl: NavController,
private loadingCtrl: LoadingController,
private popoverCtrl: PopoverController,
public afDatabase: AngularFireDatabase
) {this.pitches = afDatabase.list('/Pitches/');}
searchPitchesByType(type: string){
this.pitches = this.afDatabase.list('Pitches', {
query: {
orderByChild: 'type',
equalTo: type
}
})
}
onViewProfile() {
let data = {
uid: **(uid that corresponds to the uid in html)**
}
console.log(this.navCtrl.push(ViewProfilePage, data));
}
}
Well it is so simple that I feel I'm not getting it right.
You have to pass it as a parameter like this
<ion-item *ngFor="let item of pitches | async">
Name: {{ item.name }}
<p>
Description:{{ item.description }}
</p>
<p>
uid:{{ item.uid }}
</p>
<button right ion-button icon-only (click)="onViewProfile(item)">
<ion-icon name="add"></ion-icon>
</button>
</ion-item>
Then your ts will turn into
onViewProfile(item) {
let data = {
uid: item.uid
}
console.log(this.navCtrl.push(ViewProfilePage, data));
}
Related
I've try to use console.log to view the value, but noticeSet2[index] value is undefined. And when I print noticeSet, it will show all the data in the array. And I've try to print the index at console.log, and it show the index that match the array.
I try to create a sub menu in the sub menu of a main menu which is noticeSet and the main menu work just fine. I try the similar method and it doesn't work. all I need to solve now is to show the noticeSet2[index] value. Thanks
toggleItem(index, item) {
//this.noticeSet2[index].open = !this.noticeSet2[index].open;
console.log("here");
console.log(this.noticeSet2[0]);
console.log(this.noticeSet2[index]);
console.log(index);
let obj = {resident_id: this.resident_id,id: item.id}
this.authService.postData(obj, "getSubCategoryList").then((result) =>{
this.responseData = result;
if(this.responseData.feedData){
//this.noticeSet2[item.id] = this.responseData.feedData;
this.noticeSet3[this.noticeSet2[item.id]] = this.responseData.feedData;
this.isDataAvailable = true;
//console.log(this.noticeSet);
}
}, (err) => {
});
}
<ion-list *ngFor="let item of noticeSet; let i = index;" lines="none" class="accordion-list" detail="false"
no-padding >
<button ion-item tappble style="font-weight:bold;color:#424242;" (click)="getSubCategoryList(i,item)" [ngClass]="{'section-active':item.open,'section':!item.open}">
<ion-icon item-right slot="end" name="arrow-forward" *ngIf="!item.open"
style="font-size: 16px;font-weight: bold;"></ion-icon>
<ion-icon item-right slot="end" name="arrow-down" *ngIf="item.open"
style="font-size: 16px;font-weight: bold;color:rgb(74, 137, 220)"></ion-icon>
{{ item.title }}
</button>
<div *ngIf="noticeSet2[item.id] && item.open">
<ion-list *ngFor="let item of noticeSet2[item.id]; let j = index;" lines="none" class="child-list">
<button ion-item (click)="toggleItem(j,item)" *ngIf="item.title"
[ngClass]="{'child-active':item.open, 'child':!item.open}">
<ion-icon item-left slot="start" name="add" *ngIf="!item.open" style="font-size: 12px;font-weight: bold;">
</ion-icon>
<ion-icon item-left slot="start" name="close" *ngIf="item.open" style="font-size: 12px;font-weight: bold;">
</ion-icon>
<ion-label>
{{ item.title }}
</ion-label>
</button>
<div *ngIf="noticeSet3[this.noticeSet2[item.id]] && item.open">
<ion-list *ngFor="let item of noticeSet3[this.noticeSet2[item.id]]" class="child-list-list" lines="none">
<ion-item class="child-item" *ngIf="item.title">
<button ion-item >
{{item.title}}
</button>
</ion-item>
</ion-list>
</div>
</ion-list>
</div>
</ion-list>
This is because you use value inside the promise.
You have two ways to proceed:
First one is to use
.then( function() => { [...] }
instead of
.then((result) => { [...] }
it will works.
The Second one is to use special variable NOT inside your {}.
var that = this;
// ...
.then(function() { that.variable })
Hope this help.
I have set up several form that takes info for an upload logic: like one takes then picture, one the description, one other setting. Now I want that this is all stored in one single form, but while it still worked when using different form now I get this error:
ERROR TypeError: Cannot read property 'controls' of undefined
I have no idea why is that. I also cannot submit a new description which I want to make with <div (ngSubmit)="addTag()">
Here is my code:
html:
<form [formGroup]="categoryForm">
<ion-grid class="white">
<ion-row class="checkbox-tags rounded-checkbox-tags">
<ion-item mode="ios" lines="none" class="checkbox-tag rounded-tag">
<ion-icon name="images"></ion-icon>
<ion-checkbox formControlName="tag_1"></ion-checkbox>
</ion-item>
<ion-item mode="ios" lines="none" class="checkbox-tag rounded-tag">
<ion-icon name="camera"></ion-icon>
<ion-checkbox formControlName="tag_2"></ion-checkbox>
</ion-item>
</ion-row>
</ion-grid>
<ion-row class="range-item-row">
<ion-col size="12">
<div class="range-header">
<span class="range-value">{{ rangeForm.controls.dual.value.lower }}</span>
<span class="range-label">temperature</span>
<span class="range-value">{{ rangeForm.controls.dual.value.upper }}</span>
</div>
</ion-col>
<ion-col size="12">
<ion-range mode="md" class="range-control" formControlName="dual" color="danger" pin="true" dualKnobs="true" debounce="400"></ion-range>
</ion-col>
</ion-row>
<div (ngSubmit)="addTag()">
<ion-item>
<ion-input [disabled]="tagList?.length > 0" mode="md" formControlName="category" clearInput="true" placeholder="Tag" name="tagValue"></ion-input>
<ion-button [disabled]="!categoryForm.valid || tagList?.length > 0" type="submit" icon-only>
<ion-icon name="checkmark"></ion-icon>
</ion-button>
</ion-item>
</div>
</form>
<ion-chip class="chip" color="dark" *ngFor="let tag of tagList; let i = index">
<ion-icon name="pricetag"></ion-icon>
<ion-label class="set-label">{{ tag }}</ion-label>
<ion-icon name="close-circle" (click)="removeChip(i)"></ion-icon>
</ion-chip>
</ion-content>
<ion-footer>
<ion-button [disabled]="!tagList?.length > 0" (click)="confirm()" expand="block" type="submit">POST</ion-button>
</ion-footer>
typescript:
categoryForm: FormGroup;
...
addTag() { // properly access and reset reactive form values
const tagCtrl = this.categoryForm.get('category');
if (tagCtrl.value) {
this.tagList.push(tagCtrl.value);
this.tagInput = ''; // in order to have an empty input
}
}
ngOnInit() {
this.storage.get('image_data').then((imageFile) => {
this.imageForm.patchValue({
'image': this.storage.get('image_data')
});
});
this.categoryForm = new FormGroup({
'dual': new FormControl({lower: 100, upper: 150}),
'tag_1': new FormControl(true),
'tag_2': new FormControl(true),
'category' : new FormControl('', Validators.compose([
Validators.maxLength(25),
Validators.minLength(1),
Validators.required
])),
'image': new FormControl(null)
});
}
I'm trying to show an element on my page when a textbox is focused.
HTML
<ion-header>
<ion-navbar color="primary">
</ion-navbar>
<ion-toolbar>
<ion-row >
<ion-col>
<ion-searchbar placeholder="Search Account Number" [(ngModel)]="searchInput"> </ion-searchbar>
</ion-col>
<ion-col col-2>
<ion-icon (click)="searchCustomer()" ion-item name="arrow-forward"></ion-icon>
</ion-col>
</ion-row>
<p align="right" *ngIf="searchInput.length > 0">
<span style="color:gray;padding:5px">Switch to Advance Search</span>
</p>
</ion-toolbar>
</ion-header>
JavaScript
export class AppHomePage {
searchInput: any;
searchResults: any;
constructor(public navCtrl: NavController,
public loadingCtrl: LoadingController,
public toastCtrl: ToastController,
public http: Http,
public alertCtrl: AlertController) {
this.searchResults = [];
}
}
With my script when the page loads i get this error:
Cannot read property 'length' of undefined
Option 1:
If you haven't initialised seachInput = '' then do it first.
Option 2: User (input) event and get length when user enter any data into text box.
<ion-searchbar placeholder="Search Account Number" (input)="getSeachData($event)" [(ngModel)]="searchInput"> </ion-searchbar>
In your .ts file.
// First set variable above constructor.
searchFlag : boolen = false;
getSeachData(event){
this.searchFlag = true ? event.target.value.length > 0 : false;
}
In your HTML file.
<p align="right" *ngIf="searchFlag">
<span style="color:gray;padding:5px">Switch to Advance Search</span>
</p>
In this way you can do what you want. But Still I suggest to go with the first option. If it's not work well then go with second option.
Hope for the best.
You could use ionFocus event to achieve what you want.
HTML
<ion-header>
<ion-navbar color="primary">
</ion-navbar>
<ion-toolbar>
<ion-row >
<ion-col>
<ion-searchbar placeholder="Search Account Number" [(ngModel)]="searchInput"> </ion-searchbar>
</ion-col>
<ion-col col-2>
<ion-icon (click)="searchCustomer()" (ionFocus)="showSwitchAdvanceSearch()" ion-item name="arrow-forward"></ion-icon>
</ion-col>
</ion-row>
<p align="right" *ngIf="showSwitchAdvanceSearch">
<span style="color:gray;padding:5px">Switch to Advance Search</span>
</p>
</ion-toolbar>
</ion-header>
Typescript
export class AppHomePage {
searchInput: any;
searchResults: any;
showSwitchAdvanceSearch = false;
constructor(public navCtrl: NavController,
public loadingCtrl: LoadingController,
public toastCtrl: ToastController,
public http: Http,
public alertCtrl: AlertController) {
this.searchResults = [];
}
showSwitchAdvanceSearch() {
this.displaySwitchAdvanceSearch = true;
}
}
I have to implement swipeable segments in ionic 3 application.
I am using https://github.com/siddhartha-gupta/ionic-3-swipe-able-segments/tree/develop/src/pages directives but i am getting following error:
<ion-content padding>
<div [ngSwitch]="category" swipeSegment [tabsList]="categories"
[ERROR ->][(currentTab)]="category"
(tabChanged)="onTabChanged($event)" class="swipe-area">
<ion-list *ngSw"):
ng:///InvitefriendPageModule/InvitefriendPage.html#60:66
Error: Template parse errors:
Can't bind to 'tabsList' since it isn't a known property of 'div'. ("
<ion-content padding>
<div [ngSwitch]="category" swipeSegment [ERROR ->] .
[tabsList]="categories" [(currentTab)]="category"
(tabChanged)="onTabChanged($event)" class="swipe-ar"):
ng:///InvitefriendPageModule/InvitefriendPage.html#60:42
Can't bind to 'currentTab' since it isn't a known property of 'div'.
("
My code is:
In app.module.ts:
import { SwipeSegmentDirective } from '../directives/swipe- segment.directive';
#NgModule({
declarations: [
MyApp,
SwipeSegmentDirective
// ProgressBarComponent
],
In invitefriend.ts:
export class InvitefriendPage {
public category: string = 'everyone';
public categories: Array<string> = ['everyone', 'group', 'contact',
'directory']
// tab1Root: any = "EveryonePage";
// tab2Root: any = "GroupPage";
// tab3Root: any = "ContactPage";
// tab4Root: any = "DirectoryPage";
// public categories: Array<string> = ['everyone', 'group', 'contact',
'directory']
constructor(public navCtrl: NavController, public navParams:
NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad InvitefriendPage');
}
onTabChanged(tabName) {
this.category = tabName;
}
In invitefriend.html:
<ion-header>
<ion-navbar color="danger">
<ion-toolbar class="toolbar-color myToolbar">
<ion-segment [(ngModel)]="category" class="tabsSeg">
<ion-segment-button value="everyone" class="segBtn tabname
active activated">
Everyone
</ion-segment-button>
<ion-segment-button value="group" class="segBtn tabname">
Group
</ion-segment-button>
<ion-segment-button value="contact" class="segBtn tabname">
Contact
</ion-segment-button>
<ion-segment-button value="directory" class="segBtn tabname">
Directory
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-navbar>
</ion-header>
<ion-content padding>
<div [ngSwitch]="category" swipeSegment [tabsList]="categories"
[(currentTab)]="category" (tabChanged)="onTabChanged($event)"
class="swipe-area">
<ion-list *ngSwitchCase="'everyone'">
<ion-item>
Batman Begins
</ion-item>
<ion-item>
Transporter
</ion-item>
<ion-item>
Million Dollar Baby
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'group'">
<ion-item>
Game of Thrones
</ion-item>
<ion-item>
Daredevil
</ion-item>
<ion-item>
Arrow
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'contact'">
<ion-item>
Ice Age
</ion-item>
<ion-item>
Lion King
</ion-item>
<ion-item>
Up
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'directory'">
<ion-item>
Ice Age1
</ion-item>
<ion-item>
Lion King1
</ion-item>
<ion-item>
Up1
</ion-item>
</ion-list>
</div>
</ion-content>
I need any solution to solve above error, please give here solution as soon as possible, it would be really appreciated.
How can I change the color of those selected from the carts?
<ion-item *ngFor="let list of urunListesi; let i = index;" >
<ion-thumbnail item-start>
<img class="urunListeGorsel"
[src]="list.DEFAULTRESIM ?
'http://pexsssd.com/assets/urungorsel/'+list.DEFAULTRESIM :
'http://www.djxxxldl.com/assets/image.png'"
(load)="onImageLoad($event)" />
</ion-thumbnail>
<h2 class="urunListeYazi1"
(tap)="urunDetay(list.ID,
list.STOKNO,
list.BIRIM,
list.STOKADI,
list.FIYAT,
list.DEFAULTRESIM,
list.BARKOD,
list.ONCEKIFIYAT)">
<img [hidden]="!list.KAMPANYAID" class="indirimEtiketi"
src="assets/indirim52.png">
{{ list.STOKADI }}
</h2>
<p class="urunListeYazi">
<span (tap)="urunDetay(list.ID,
list.STOKNO,
list.BIRIM,
list.STOKADI,
list.FIYAT,
list.DEFAULTRESIM,
list.BARKOD,
list.ONCEKIFIYAT)"
class="fiyat"
[style.font-weight]="'bold'"
[style.color]="list.KAMPANYAID > 0 ? 'green' : 'black'">
{{ urunFiyatKisalt(list.FIYAT) }} ₺
</span>
<del (tap)="urunDetay(list.ID,
list.STOKNO,
list.BIRIM,
list.STOKADI,
list.FIYAT,
list.DEFAULTRESIM,
list.BARKOD, list.ONCEKIFIYAT)"
[style.font-weight]="'bold'"
[hidden]="!list.KAMPANYAID">
{{ urunFiyatKisalt(list.ONCEKIFIYAT) }}
</del>
<span [style.font-weigth]="'bold'" [hidden]="!list.KAMPANYAID">₺</span>
<ion-icon (tap)="sepetEkle(i, list.STOKNO)"
[class.sepeteEklenmis]="sepetEkleDeger"
class="urunListesiSepeteEkle"
ios="ios-cart"
md="md-cart">
</ion-icon>
</p>
<h3 [hidden]="!list.KAMPANYAID"
class="kampanyaliUrunlerBitisTarihi">
<ion-icon name="ios-alarm-outline"></ion-icon>
{{ ngOnInit(list.BITISTARIHI)}}
</h3>
</ion-item>
Home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
private names = [
{ name: 'John', selected:false},
{ name : 'Paul', selected:false},
{ name : 'Ringo', selected:false},
{ name: 'George', selected:false}
];
constructor(public navCtrl: NavController) {
}
select(selectedName):void {
this.names.forEach((n) => {
if (n.name === selectedName.name) {
n.selected = !n.selected;
}
});
}
getBgColor(name):string {
return (name.selected) ? 'yellow' : '';
}
}
Home.html
<ion-list>
<ion-item *ngFor="let name of names"
[style.background-color]="getBgColor(name)"
(click)="select(name)">
{{name.name}}
</ion-item>
</ion-list>
You will need to add a class when selected and remove the class when deselected. then you can just apply a css to selected items. something like
.selected{background-color:pink;}