Hi, I’m new to this, both forum and Ionic things. Well, I’m having some kinda trouble because I have configured Firebase database only to get data form to a token (only have token name, and token game) and it’s working fine. My problem is, I’m not showing the data to the user correctly, I mean, sometimes it work, and sometimes not. I’m making the database like:
- tokenmanagersystem
– tokens
— userId
---- tokenId
Sometimes it show in the screen the way I want, but when I try to log with some other account, it happens something and doesn’t show anymore on either accounts.
This is my tokens.html
<!-- This page is responsible for user tokens management -->
<ion-header>
<ion-navbar>
<ion-title>Your Tokens</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item-sliding *ngFor="let token of tokens | async">
<ion-item>
<h1>{{token.name}}</h1>
<h1>{{token.game}}</h1>
</ion-item>
<ion-item-options side="left">
<button ion-button color="secondary" (click)="editToken(token)">
<ion-icon name="create"></ion-icon>
</button>
<button ion-button color="danger" (click)="deleteToken(token.key)">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<ion-fab bottom right>
<button ion-fab (click)="newToken()"><ion-icon name="add"></ion-icon></button>
</ion-fab>
</ion-content>
This is token.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController, ToastController } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
// pages
import { EditTokenPage } from '../edit-token/edit-token';
// providers
import { TokenServiceProvider } from '../../providers/token-service/token-service';
@IonicPage()
@Component({
selector: 'page-tokens',
templateUrl: 'tokens.html',
})
export class TokensPage {
tokens: Observable<any>;
constructor(public navCtrl: NavController,
public navParams: NavParams,
private modalCtrl: ModalController,
private toastCtrl: ToastController,
private tokenService: TokenServiceProvider) {
this.tokens = this.tokenService.getAll();
console.log(this.tokens);
}
private newTokenPage(token: any){
let modal = this.modalCtrl.create(EditTokenPage, {token: token});
modal.present();
}
newToken(){
this.newTokenPage({});
}
editToken(token: any){
this.newTokenPage(token);
}
deleteToken(key: string){
this.tokenService.remove(key)
.then(()=>{
this.toastCtrl.create({ message: "Ficha removida com sucesso", duration: 3000}).present();
}).catch(error => {
this.toastCtrl.create({ message: "Erro ao remover sua ficha", duration: 3000}).present();
});
}
}
This is the token-service (provider)
// this provider is responsible for the basic tokens CRUD
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
// firebase database
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
@Injectable()
export class TokenServiceProvider {
private PATH = '/tokens/';
private USER:string;
constructor(private db: AngularFireDatabase,
private fireAuth: AngularFireAuth){
this.fireAuth.authState.subscribe(user => {
if(user) this.USER = user.uid+"/";
})
}
getAll(){
return this.db.list(this.PATH+this.USER)
.snapshotChanges().pipe(map(changes => {
return changes.map(token => ({
// data
key: token.payload.key,
...token.payload.val()
}))
}));
}
get(key: string){
return this.db.object(this.PATH+this.USER+key).snapshotChanges()
.pipe(map(token =>({
// data
key: token.payload.key,
...token.payload.val()
}))
);
}
save(token: any){
return new Promise((resolve, reject) => {
// if exists is an update
if(token.key){
this.db.list(this.PATH+this.USER)
.update(token.key, {
// data
name: token.name,
game: token.game
}).then(() => resolve())
.catch((e) => reject(e));
} // if does not exist, is a push
else{
this.db.list(this.PATH+this.USER)
.push({
// data
name: token.name,
game: token.game
}).then(() => resolve());
}
})
}
remove(key: string){
return this.db.list(this.PATH+this.USER).remove(key);
}
}