I'm trying to add firebase to ionic 3 but I'm getting an error on Object (...) not a function, everything runs well until the subscribe function gets executed then the error shows, I've done all needed integration and here my home.ts code
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { FirstPage } from '../first/first';
import { AskPage } from '../ask/ask';
import {AngularFireDatabase} from 'angularfire2/database'
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController,
public afd : AngularFireDatabase) {
this.getDataFromFireBase();
}
getDataFromFireBase(){
this.afd.list('/Heros/').valueChanges().subscribe(
data => {
console.log(JSON.stringify(data))
}
)
}
Related
Trying to get Wordpress data into my Angular 6 component.
When I return a single post via Wordpress REST API it produces the right data (http://w3stage.com/tricap/wp-json/wp/v2/properties/174), but the data is not making it through to my template.
service:
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Observable } from 'rxjs';
#Injectable({
providedIn: 'root'
})
export class WordpressService {
constructor(private http: HttpClient) { }
getProperty(id): Observable<any[]> {
return this.http.get<any[]>('http://w3stage.com/tricap/wp-json/wp/v2/properties/'+id);
}
}
component:
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { Location } from '#angular/common';
import { Observable } from 'rxjs';
import { WordpressService } from '../wordpress.service';
#Component({
selector: 'app-property-detail',
templateUrl: './property-detail.component.html',
styleUrls: ['./property-detail.component.scss']
})
export class PropertyDetailComponent implements OnInit {
property: Observable<any[]>;
constructor(
private route: ActivatedRoute,
private location: Location,
private wp: WordpressService
) {
this.getProperty();
}
getProperty(): void {
const id = +this.route.snapshot.paramMap.get('id');
this.property = this.wp.getProperty(id);
console.log(this.property);
}
ngOnInit(): void {
}
}
template:
{{ property.title.rendered }}
This generates the following error:
ERROR TypeError: Cannot read property 'rendered' of undefined
at Object.eval [as updateRenderer] (PropertyDetailComponent.html:8)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:10782)
at checkAndUpdateView (core.js:10158)
at callViewAction (core.js:10394)
at execComponentViewsAction (core.js:10336)
at checkAndUpdateView (core.js:10159)
at callViewAction (core.js:10394)
at execEmbeddedViewsAction (core.js:10357)
at checkAndUpdateView (core.js:10154)
at callViewAction (core.js:10394)
However, when I adapt the code to return a bunch of posts from wordpress, I can get the data to work just fine in conjunction with an *ngFor loop. When I try an *ngFor loop with the single post result, same thing - no go.
You need to use safe navigation operator or *ngIf inorder to handle the delay of response from your asynchronous request,
change your template as,
{{ property?.title?.rendered }}
also you need to subscribe to the observable,
this.wp.getProperty(id).subscribe(data => {
this.property = data;
});
I have a problem with getDownloadURL() method from AngularFire Storage. I couldn't use then() without an error.
Here is my code :
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireStorage } from 'angularfire2/storage';
import { GroupDetailsPage } from '../group-details/group-details';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, private afDB: AngularFireDatabase, private afStorage: AngularFireStorage) {
let ref = this.afStorage.ref('test.jpg');
ref.getDownloadURL().then(function(url){
console.log( url );
});
}
}
Here my error :
ERROR Error: Uncaught (in promise): TypeError: ref.getDownloadURL(...).then is not a function
If I don't use then() I get a PromiseObservable as response.
Have you got an idea ?
Thanks in advance,
Just get the file url using
let ref = this.afStorage.ref('test.jpg');
this.url = ref.getDownloadURL();
And use it with the async pipe in your template file.
I always get this error:
TypeError: Cannot read property 'propName' of null
Here is my Typescript.
handlu-prop.ts
import { Component } from '#angular/core';
import { IonicPage, ModalController, NavController, NavParams, ActionSheetController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
import { AngularFireDatabase,FirebaseObjectObservable } from 'angularfire2/database';
import { Subscription } from 'rxjs/Subscription';
import { ConAgentsPage } from '../conagents/conagents';
import { HandluPage } from '../handlu/handlu';
import { PropertyItem } from '../../models/property-item/PropItem.interface';
#IonicPage()
#Component({
selector: 'page-handlu-prop',
templateUrl: 'handlu-prop.html',
})
export class HandluPropPage {
propertyItemSubscription: Subscription;
propertyItem = {} as PropertyItem;
propertyItemRef$: FirebaseObjectObservable<PropertyItem>;
constructor(private database: AngularFireDatabase,
private modCtrl: ModalController,
public navCtrl: NavController,
public navParams: NavParams,
public alertCtrl: AlertController) {
const propertyItemId = this.navParams.get('$key');
console.log(propertyItemId);
this.propertyItemRef$ = this.database.object(`Property/${propertyItemId}`).valueChanges();
this.propertyItemSubscription =
this.propertyItemRef$.subscribe( propertyItem => this.propertyItem = propertyItem );
}
ionViewWillLeave() {
this.propertyItemSubscription.unsubscribe();
}
handlu-prop.html (here is a part of my template)
<h2>{{propertyItem.propName}}</h2>
Try modifying your HTML file to this
<h2>{{ propertyItem?.propName }}</h2>
the ? serves the purpose of checking if this element is defined or not, it avoids crashing the app into that error.
I want to get the list of users where text=Groomers from firebase database
I am getting firebase warning about .indexOn, but not getting the list of users.
Below is my code:
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { AuthService } from '../../services/auth.service';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';
#Component({
selector: 'app-animal-services',
templateUrl: './animal-services.component.html',
styleUrls: ['./animal-services.component.css']
})
export class AnimalServicesComponent implements OnInit {
users: Observable<any[]>;
constructor(public _firebaseAuth: AngularFireAuth, private db: AngularFireDatabase, private router: Router) {
this.users = db.list('/professionals', ref => ref.orderByChild('text').equalTo("Groomers")).valueChanges();
}
ngOnInit() {
}
}
Below is the image of my database:
orderByChild("text") should be orderByChild("qualification")
Phew! I figured out my way by changing the database in the following way:
Below is the image of my database:
I'm playing with angular2 and meteor (i'm new with both) and i'd like to change route if i can find a certain document in a collection. I read in the Angular 2 Meteor tutorial that the class MeteorComponent has methods subscribe and autorun so i'm trying to use this methods to get the job done (not sure if this is the best way to do it - i didn't remove autopublish).
But right now it isn't working.
My component is:
import {View, OnInit, Component} from 'angular2/core'
import {MeteorComponent} from 'angular2-meteor'
import {Navbar} from 'client/navbar/navbar'
import {FakePlayground} from 'client/intro/fake-playground/fake-playground'
import {PlayerList} from 'client/player-list/player-list'
import {PlayerService} from 'client/player/player-service'
import {Player} from 'client/player/player'
import {ProtectedDirective} from 'client/directives/protected-directive'
import {SentInvitation} from 'client/invitation/sent-invitation'
import {ReceivedInvitation} from 'client/invitation/received-invitation'
import {Invitations} from 'lib/invitations'
import {Router} from 'angular2/router'
#Component({
selector: 'intro'
})
#View({
templateUrl: 'client/intro/intro.html',
directives: [
Navbar,
PlayerList,
FakePlayground,
ProtectedDirective,
SentInvitation,
ReceivedInvitation
]
})
export class Intro extends MeteorComponent implements OnInit {
currentPlayer: Player
invitation: Mongo.Cursor<Object>
constructor(
public playerService: PlayerService,
private _router:Router
) {
super()
}
getInvitation() {
this.subscribe('invitations', () => {
this.invitation = Invitations.find({$or: [
{$and: [
{"sender._id": this.currentPlayer._id},
{status: 1}
]},
{$and: [
{"recipient._id": this.currentPlayer._id},
{status: 1}
]}
]})
this.autorun(() => {
console.log('autorun')
if(this.invitation){
console.log('game started')
this._router.navigate(['Game'])
}
})
})
}
getPlayer() {
this.currentPlayer = this.playerService.getCurrentPlayer()
}
ngOnInit() {
this.getPlayer()
this.getInvitation()
}
}
And in my fantasy getInvitation() called in ngOnInit should subscribe to
'invitations' collection and autorun() should check if the document is found and if it's found should change route.
But i'm not getting errors neither the route change.
Which should be the right way to change the route reactively to collection change?
Well, i was using this.autorun() the worng way.
It was much simpler:
import {View, OnInit, Component} from 'angular2/core'
import {MeteorComponent} from 'angular2-meteor'
import {Navbar} from 'client/navbar/navbar'
import {FakePlayground} from 'client/intro/fake-playground/fake-playground'
import {PlayerList} from 'client/player-list/player-list'
import {PlayerService} from 'client/player/player-service'
import {Player} from 'client/player/player'
import {ProtectedDirective} from 'client/directives/protected-directive'
import {SentInvitation} from 'client/invitation/sent-invitation'
import {ReceivedInvitation} from 'client/invitation/received-invitation'
import {Invitations} from 'lib/invitations'
import {Router} from 'angular2/router'
#Component({
selector: 'intro'
})
#View({
templateUrl: 'client/intro/intro.html',
directives: [
Navbar,
PlayerList,
FakePlayground,
ProtectedDirective,
SentInvitation,
ReceivedInvitation
]
})
export class Intro extends MeteorComponent implements OnInit {
currentPlayer: Player
constructor(
public playerService: PlayerService,
private _router:Router
) {
super()
}
getPlayer() {
this.currentPlayer = this.playerService.getCurrentPlayer()
}
ngOnInit() {
this.getPlayer()
this.autorun(() => {
if (Invitations.findOne({
$or: [
{$and: [{"sender._id": this.currentPlayer._id},{status: 1}]},
{$and: [{"recipient._id": this.currentPlayer._id},{status: 1}]}
]
})) {
this._router.navigate(['Game'])
}
})
}
}