Making Ionic2 Slides using Firebase data - firebase

I stored profile data in firebase and
trying to retrieve them and show them in template with slides.
(I am making a matching service.)
But it seems the template is loaded before data is assigned to variable.
When I am just retrieving one data, not list,
it works fine.
I tried all the solutions on the goole,
like using 'NgZone', *ngIf, etc but nothing worked.
Please help me.
My Error message.
FindMatePage.html:21 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
at DefaultIterableDiffer.diff (core.es5.js:7083)
at NgForOf.ngDoCheck (common.es5.js:1699)~~
My find-mate.ts file.
export class FindMatePage implements OnInit{
#ViewChild('profileSlide') slider: Slides;
profileList = [] as Profile[];
constructor(public navCtrl: NavController, public navParams: NavParams,
private databaseService: DataServiceProvider, private auth:
AuthServiceProvider,
) {}
ngOnInit(){
this.auth.getActiveUser().getIdToken()
.then((token: string) => (
this.databaseService.fetchProfileList(token)
.subscribe((list: Profile[]) => {
if(list) {
this.profileList = list;
console.log(this.profileList)
} else {
this.profileList = [];
}
})
))//then ends
}
My find-mate.html file
<ion-content class="tutorial-page">
<ion-slides *ngIf="profileList" #profileSlide pager
(ionSlideDidChange)="slideChanged()">
<ion-slide>
<h2 class="profile-title">Ready to Play?</h2>
<button ion-button large clear icon-end color="primary">
Continue
<ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-slide>
<ion-slide *ngFor="let profile of profileList">
<ion-buttons block>
<button ion-button color="primary">채팅하기</button>
</ion-buttons>
<ion-item> {{profile.username}}</ion-item>
<ion-item> {{profile.gym}</ion-item>
<ion-item> {{profile.goal}}</ion-item>
<ion-item> {{profile.level}}</ion-item>
</ion-slide>
My part of data-service.ts file
//프로필 목록 가져오기
fetchProfileList(token: string) {
return this.http.get('https://fitmate-16730.firebaseio.com/profile-list.json?auth=' + token)
.map((response: Response) => {
return response.json();
})
.do((profileList: Profile[]) => {
if (profileList) {
console.log(profileList);
return this.profileList = profileList;
} else {
return this.profileList = null;
}
});
}

Related

ionic async ngFor data

UPDATE ON BOTTOM
I am trying to show data in an *ngFor that i'm getting from an object that is getting retrieved asynchronously from ionic storage. At the moment i am getting a blank screen.
I have tried multiple things like using async pipes in different manners.
Does anybody know the right way?
Here is my storage service method that is getting called:
public getFlow(flowId:number){
return this.storage.get(FLOWS_KEY).then((flows:Map<number,Flow>)=>{
return flows.get(flowId);
});
}
this returns a Promise<Flow>
this is my component code:
import { Component, OnInit } from '#angular/core';
import { ModalController } from 'ionic-angular';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Flow } from '../../model/Flow';
import { FlowService } from '../../model/services/flowService';
import {CreateTaskPage} from '../create-task/create-task'
import { Task } from '../../model/Task';
#IonicPage()
#Component({
selector: 'page-flow',
templateUrl: 'flow.html',
})
export class FlowPage {
flow;
constructor(public navCtrl: NavController, public navParams: NavParams,private flowService:FlowService,public modalCtrl: ModalController) {
this.flow = this.flowService.getFlow(Number(this.navParams.get("flowId")))
}
ngOnInit(): void {
}
ionViewDidLoad() {
console.log('ionViewDidLoad FlowPage');
}
createTask(){
const modal = this.modalCtrl.create(CreateTaskPage,{flowId:this.flow.flowId});
modal.present();
}
swipe(e,task:Task){
if(e.direction == 2){
console.log("panUp");
task.column--;
}
if(e.direction == 4){
console.log("panDown");
task.column++;
}
}
}
My html:
<ion-content padding>
<div *ngIf="(flow | async)">
<div *ngFor="let col of flow.columns;index as i">
<h2>{{col}}</h2>
<div *ngFor="let task of flow.getTasksFromCol(i)">
<ion-card (swipe)="swipe($event,task)">
<ion-item>
<h2>{{task}}</h2>
<button ion-button item-end clear icon-end>
<ion-icon name='more'></ion-icon>
</button>
<p>{{task}}</p>
</ion-item>
</ion-card>
</div>
</div>
</div>
<ion-fab right bottom>
<button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
<ion-fab-list side="left">
<button (click)="createTask()" ion-fab><ion-icon name="add-circle"></ion-icon></button>
<button ion-fab><ion-icon name="create"></ion-icon></button>
</ion-fab-list>
</ion-fab>
</ion-content>
Thanks for helping.
UPDATE:
I found one big mistake in my component it now looks like this:
flow:Flow;
constructor(public navCtrl: NavController, public navParams: NavParams,private flowService:FlowService,public modalCtrl: ModalController) {
this.flowService.getFlow(Number(this.navParams.get("flowId"))).then(flow =>{
this.flow = flow;
})
}
i also updated my html but it still isn't working: i now get error:
ERROR TypeError: _co.flow.getTasksFromCol is not a function
at Object.eval [as updateDirectives]
This is weird because this method exists in my Flow Model:
import { Task } from "./Task";
export class Flow {
//PK for 1-n relation with task
flowId:number;
projectName:string;
columns:string[];
tasks: Map<number,Task>;
constructor(flowId:number,projectName:string,columns:string[],tasks:Map<number,Task>){
this.flowId = flowId;
this.projectName = projectName;
this.columns = columns;
this.tasks = tasks;
}
public getTasks(){
return Array.from(this.tasks.values())
}
public getTasksFromCol(colNumber:number){
var tasks = new Array<Task>();
for(let task of Array.from(this.tasks.values())){
if(task.column == colNumber){
tasks.push(task)
}
}
return tasks;
}
}
UPDATE2
i now added this to my service
public getTasksFromCol(flowId:number,colNumber:number){
return this.storage.get(FLOWS_KEY).then((flows:Map<number,Flow>)=>{
var flow:Flow = flows.get(flowId);
var tasks = new Array<Task>();
for(let task of Array.from(flow.tasks.values())){
if(task.column == colNumber){
tasks.push(task)
}
}
return tasks;
});
}
do i just call this in my html page? i'm kinda stuck
I found your mistake.
You have created one variable.
flow:Flow;
You have assigned value to that variable.
this.flow = flow;
Now you need to understand that variable has contains some value related to what you have assigned. So you can't access flow.getTasksFromCol()
Thats the reason you have faced this error.
ERROR TypeError: _co.flow.getTasksFromCol is not a function at Object.eval [as updateDirectives]
Solution:-
Just move this getTasksFromCol() method to service and apply html like following,
I hope it's working. Let try this once and let me know if any error.

Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]" [duplicate]

This question already has an answer here:
Object returned from Firebase signIn
(1 answer)
Closed 4 years ago.
I am trying to register with firebase and ionic,
but I face the problem from the beginning of the day,
ERROR Error: Reference.child failed: First argument was an invalid path = "undefined". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]",
can anyone help me with that
this is the provider:
import * as firebase from 'firebase';
import { Injectable } from '#angular/core';
/*
Generated class for the UserServiceProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
#Injectable()
export class UserServiceProvider {
public data: any;
public fireAuth: any;
public userProfile: any;
constructor() {
console.log('Hello UserServiceProvider Provider');
this.fireAuth = firebase.auth();
this.userProfile = firebase.database().ref(`email`);
}
signupUserService(account: {}){
return this.fireAuth.createUserWithEmailAndPassword(account[`email`], account[`password`]).then((newUser) => {
//sign in the user
this.fireAuth.signInWithEmailAndPassword(account[`email`], account[`password`]).then((authenticatedUser) => {
//successful login, create user profile
this.userProfile.child(authenticatedUser.uid).set(
account
);
});
});
}
}
------------------------------------------------------
this is my signUp page
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams, LoadingController, ToastController } from 'ionic-angular';
import { UserServiceProvider } from '../../providers/user-service/user-service';
import { HomePage } from '../home/home';
/**
* Generated class for the LoginPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
public skills : string;
public email : string;
public phone : any;
public password : any;
public first_name : any;
public last_name : any;
public city : any;
public state : any;
public country : any;
public isJobSeeker : boolean;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public usersserviceProvider : UserServiceProvider,
public toastCtrl: ToastController, public loadingCtrl: LoadingController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
doSignup(){
var account = {
first_name: this.first_name,
last_name: this.last_name || '',
skills: this.skills || '',
email: this.email,
phone: this.phone || '',
password: this.password,
city: this.city || '',
state: this.state || '',
country: this.country || '',
isJobSeeker : this.country || ''
};
var that = this;
var loader = this.loadingCtrl.create({
content: "Please wait...",
});
loader.present();
this.usersserviceProvider.signupUserService(account).then(authData => {
//successful
loader.dismiss();
that.navCtrl.setRoot(HomePage);
}, error => {
loader.dismiss();
// Unable to log in
let toast = this.toastCtrl.create({
message: error,
duration: 3000,
position: 'top'
});
toast.present();
that.password = ""//empty the password field
});
}
}
this my html
<ion-list>
<ion-item >
<ion-label stacked>Skill Set (separate with comma)</ion-label>
<ion-input type="text" [(ngModel)]="skills" name="skills" placeholder="eg. PHP, Writing, Chef" required="required"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Email</ion-label>
<ion-input type="email" [(ngModel)]="email" name="email" placeholder="eg. john#doe.com"></ion-input>
</ion-item>
<ion-item >
<ion-label stacked>Phone</ion-label>
<ion-input type="text" [(ngModel)]="phone" name="phone" placeholder="eg. 0802222222" required="required"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Password</ion-label>
<ion-input type="password" [(ngModel)]="password" name="password"></ion-input>
</ion-item>
<hr/>
<ion-item>
<ion-label stacked>First name</ion-label>
<ion-input type="text" [(ngModel)]="first_name" name="first_name"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Last name</ion-label>
<ion-input type="text" [(ngModel)]="last_name" name="last_name"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>City</ion-label>
<ion-input type="text" [(ngModel)]="city" name="city"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>State/Province</ion-label>
<ion-input type="text" [(ngModel)]="state" name="state"></ion-input>
</ion-item>
<ion-item>
<ion-label>Looking for Job?</ion-label>
<ion-toggle [(ngModel)]="isJobSeeker" name="phone" checked="false"></ion-toggle>
</ion-item>
<div padding text-center>
<button ion-button color="danger" round (click)="doSignup()" >Signup</button>
</div>
</ion-list>
Thanks in advance,
If you check the documentation of signInWithEmailAndPassword, you will see that it returns a UserCredential. Checking the documentation for that shows that it has no uid property, which explains why you get undefined.
You'll want to use authenticatedUser.user.uid, so:
this.fireAuth.signInWithEmailAndPassword(account[`email`], account[`password`]).then((userCredential) => {
this.userProfile.child(userCredential.user.uid).set(
account
);
});
Creating a new user account with createUserWithEmailAndPassword automatically signs them in, so the nesting of those calls is not needed. If you (only) want to store the user profile when creating the account, createUserWithEmailAndPassword also returns a UserCredential. So there too, you need to indirect to user.uid:
return this.fireAuth.createUserWithEmailAndPassword(account[`email`], account[`password`]).then((userCredential) => {
return this.userProfile.child(userCredential.user.uid).set(
account
);
});

Error - username doesn't show when subscribing to AngularFireObject - Ionic 3 chat mobile application

I'm trying to create a simple chat application with Ionic 3 and Firebase. Registering, logging in users, sending, and displaying their messages work. This is a common chat room for all users.
I'd like a message to appear in the chat room when a user is logged in or logged out to let other users know. When test user is logged in, this message appears:
"has joined the room"
When test user is logged out, this message appears:
"test#gmail.com has left the room"
I'd like the username (email address) to show when the user is logged in as well. I'd like this message to appear: "test#gmail.com has joined the room"
I tried to write this.username on the console, but it doesn't write anything to the console.
chat.ts:
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
import { Storage } from '#ionic/storage';
import { Subscription } from 'rxjs/Subscription';
import $ from 'jquery';
#IonicPage()
#Component({
selector: 'page-chat',
templateUrl: 'chat.html',
})
export class ChatPage {
username: string= '';
message: string= '';
obsRef: AngularFireObject<any>;
obsToData: Subscription;
messages: object[]= [];
constructor(public db: AngularFireDatabase, public navCtrl: NavController, public navParams: NavParams, private storage: Storage) {
this.storage.get('username').then((val) => {
if (val != null) {
this.username= val;
}
});
this.obsRef = this.db.object('/chat');
this.obsToData = this.obsRef.valueChanges().subscribe( data => {
var data_array= $.map(data, function(value, index) {
return [value];
});
this.messages= data_array;
});
}
sendMessage() {
this.db.list('/chat').push({
username: this.username,
message: this.message
}).then( () => {
this.message= '';
});
}
ionViewWillLeave() {
console.log('user is about to go');
this.obsToData.unsubscribe();
this.db.list('/chat').push({
specialMessage: true,
message: `${this.username} has left the room`
})
}
ionViewDidLoad() {
console.log(this.username);
this.db.list('/chat').push({
specialMessage: true,
message: this.username + `has joined the room`
})
}
}
chat.html:
<ion-header>
<ion-navbar>
<ion-title>Chat</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div id="chatMessages">
<div *ngFor="let message of messages" [class]="message.specialMessage ? 'message special': 'message'">
<div [class]="message.username == username ? 'innerMessage messageRight': 'innerMessage messageLeft'">
<div class="username"> {{ message.username }} </div>
<div class="messageContent"> {{ message.message }} </div>
</div>
</div>
</div>
</ion-content>
<ion-footer>
<div id="footer">
<ion-input type="text" [(ngModel)]= "message"> </ion-input>
<button ion-button icon-only (click)= "sendMessage()">
<ion-icon name="send"></ion-icon>
</button>
</div>
</ion-footer>

AngularFire5 — Reference.update failed: First argument contains a function in property

I'm trying to save changes to an existing node in my Firebase DB, but I'm getting this error here:
Reference.update failed: First argument contains a function in property 'matatu-list.-L-RMcqjnladFM5-V80b.payload.node_.children_.comparator_' with contents = function NAME_COMPARATOR(left, right) {
return util_1.nameCompare(left, right);
}
I want to edit an item basing on its respective key (which is passed from another page through navParams).
Here is the interface I used to structure the DB:
interface.ts
export interface Matatu {
$key?: string;
matNumberPlate: string;
matSacco: string;
matDriver: string;
matAccessCode: string;
matStatus: string;
matTracker: string;
matLocation: string;
//Optionals
payload?:any;
key?:any;
}
The .ts and .html code that's meant to update the record:
.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireObject, AngularFireDatabase } from 'angularfire2/database';
import { Matatu } from '../../models/matatu/matatu.interface';
import { Subscription } from 'rxjs/Subscription';
#IonicPage()
#Component({
selector: 'page-edit-ma3',
templateUrl: 'edit-ma3.html',
})
export class EditMa3Page {
matatuRef$: AngularFireObject<Matatu>;
matatuAsync$: any;
matatu = {} as Matatu;
sub: Subscription;
constructor(public navCtrl: NavController, public navParams: NavParams, private database: AngularFireDatabase) {
const matKey = this.navParams.get('matKey');
this.matatuRef$ = this.database.object(`matatu-list/${matKey}`);
this.matatuAsync$ = this.matatuRef$.snapshotChanges();
//console.log(matKey);
this.sub = this.matatuAsync$.subscribe(
matatu => this.matatu = matatu
)
}
editMatatu(matatu : Matatu){
this.matatuRef$.update(matatu);
this.navCtrl.pop();
}
ionViewWillLeave(){
this.sub.unsubscribe();
}
}
.html
<ion-content>
<ion-list>
<ion-list-header>
Matatu Details
</ion-list-header>
<ion-item>
<ion-label>Sacco</ion-label>
<ion-input type="text" [(ngModel)]="matatu.matSacco"></ion-input>
</ion-item>
<ion-item>
<ion-label>Driver</ion-label>
<ion-input type="text" [(ngModel)]="matatu.matDriver"></ion-input>
</ion-item>
<ion-item>
<ion-label> Access Code</ion-label>
<ion-input type="password" [(ngModel)]="matatu.matAccessCode"></ion-input>
</ion-item>
</ion-list>
<ion-list radio-group [(ngModel)]="matatu.matTracker">
<ion-list-header>
Preferred Tracking
</ion-list-header>
<ion-item>
<ion-label>GPS</ion-label>
<ion-radio checked="true" value="GPS"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Driver's Location</ion-label>
<ion-radio value="Driver's Location"></ion-radio>
</ion-item>
</ion-list>
<div padding>
<button ion-button block (click)="editMatatu(matatu)">Save Changes</button>
</div>
</ion-content>
How do I go about rectifying this? I'd appreciate it if it was pointed out to me where I went wrong, and what other approaches can get this done(even the dirty ones!).
You can pass the key in a placeholder variable or you could just concatenate it like so:
this.matatuRef$ = this.database.object(`matatu-list/`+ matKey);
Do keep in mind this is not a good approach, but it'll do the trick.
Firebase fires this error when you try to push data that contains a function, or a datatype instead of data values.
Basing on your interface, and the values you are passing from you template, your
update method should be like this:
editMatatu(matatu : Matatu){
this.matatuRef$.update({
matDriver: this.matatu.matDriver,
matAccessCode: this.matatu.matAccessCode,
matSacco: this.matatu.matSacco
});
}

Passing data correctly with angularfire2 / ionic2

I have a simple structure in my Database:
The app logic here: I create a list with some data with the function to delete each list item separately.
I´m using the angularefire2 plugin for database communication. The code to get data looks like this in component:
// Set variables
currentUserID: any;
visits: any[] = [];
selectedVisit: any;
constructor(public navCtrl: NavController, public navParams: NavParams, private dbAction: DbActionsProvider, private afDatabase: AngularFireDatabase) {
// Build Current User ID
this.currentUserID = this.dbAction.currentUserID().subscribe(data => {
this.currentUserID = data.uid;
});
}
ngOnInit() {
// Get data
this.afDatabase.object('data/users/' + this.currentUserID + '/visits')
.snapshotChanges().map(action => {
const data = action.payload.toJSON();
return data;
})
.subscribe(result => {
Object.keys(result).map(key => {
this.visits.push({ 'key': key, 'data':result[key]
});
}); console.log(this.visits)
})
}
The code in my view:
<ion-item-sliding *ngFor="let visit of visits | orderBy:'date' : false" (ionDrag)="onSelectedVisit(visit)">
<ion-item>
<ion-icon ios="ios-man" md="md-man" item-start></ion-icon>
<strong>{{ !visit.data.name == '' ? visit.data.name : 'Unbekannt' }}</strong>
<p>Musterstraße 8, 66130 Saarbrücken</p>
</ion-item>
<ion-item-options side="right">
<button ion-button>Bearbeiten</button>
<button ion-button color="danger" (click)="deleteVisit()">Löschen</button>
</ion-item-options>
<ion-input [(ngModel)]="visit.id"></ion-input>
</ion-item-sliding>
Ok..now I want that the user can delete items. For this I need access to the key reference ($key in firebase, but not works.....)...so I had to build my own object with this key field in the top. Not a pretty solution...do you have another idea?
The problem:
If the user swipe an item to see the Delete-Option, I pass data with (ionDrag)="onSelectedVisit(visit). My code in component for this function:
onSelectedVisit(visit) {
this.selectedVisit = visit.key;
console.log(this.selectedVisit);
}
deleteVisit() {
this.afDatabase.list('data/users/' + this.currentUserID + '/visits').remove(this.selectedVisit);
this.navCtrl.setRoot(VisitsPage);
}
If I not navigate back to VisitsPage (same page) I´ll see duplicates in my list because of the own builded object before.....so I need a more elegant solution..
Found a pretty solution:
export class AppComponent {
itemsRef: AngularFireList<any>;
items: Observable<any[]>;
constructor(db: AngularFireDatabase) {
this.itemsRef = db.list('messages');
// Use snapshotChanges().map() to store the key
this.items = this.itemsRef.snapshotChanges().map(changes => {
return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
});
}
addItem(newName: string) {
this.itemsRef.push({ text: newName });
}
updateItem(key: string, newText: string) {
this.itemsRef.update(key, { text: newText });
}
deleteItem(key: string) {
this.itemsRef.remove(key);
}
deleteEverything() {
this.itemsRef.remove();
}
}
Reference: Github - Angularfire2 Docs

Resources