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.
Related
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))
}
)
}
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;
});
So I am relatively new to Ionic and Firebase, and I am trying to display user data that already exists in Firebase.
Here is the error that I am getting:
invalidpipeargument: '[object object']: error showing.
I do know what the issue is after looking at other questions similar to mine. It seems I cannot assign the async function as database.object does not return an observable. So I have tried to add .valueChanges(); to make it an observable, but I believe this is clashing with the angularfireobject as that is already assigned to the variable profile.data so this would not work.
I have also tried this:
// get (): AngularFireObject<any[]>{
//return this.afDatabase.list`/profile/${data.uid}`;
//}
If you point me in the right direction that would be great.
Here is my code:
.ts file
import { Component } from '#angular/core';
import { NavController, ToastController } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase, AngularFireObject} from 'angularfire2/database';
import { Profile } from '../../model/profile';
import { DEFAULT_INTERPOLATION_CONFIG } from '#angular/compiler';
#Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
profileData: AngularFireObject<Profile>
// get (): AngularFireObject<any[]>{
//return this.afDatabase.list`/profile/${data.uid}`;
//}
constructor(private afAuth:AngularFireAuth, private afDatabase: AngularFireDatabase,
public navCtrl: NavController, private toast: ToastController) {
}
ionViewDidLoad() {
this.afAuth.authState.take(1).subscribe(data =>{
if (data && data.email && data.uid){
this.toast.create({
message: `Welcome to MatchMyFighter ${data.email}`,
duration: 3000,
}).present();
// this.profileData = this.afDatabase.object(`profile/${data.uid}`)
this.profileData = this.afDatabase.object(`/profile/${data.uid}`).valueChanges();;
}
else{
this.toast.create({
message:`could not autenticate`,
duration:3000
}).present;
}
})
}
}
.html
<p>
Username: {{(profileData | async)?.username}}
</p>
The call to valueChanges() converts the AngularFireObject<Profile> to an observable.
You have to change the type to Observable<Profile> like so:
profileData: Observable<Profile>;
constructor(private db: AngularFireDatabase) { } // other stuff emitted ...
ionViewDidLoad() {
// ...
this.profileData = this.db.object<Profile>(`/profile/${data.uid}`).valueChanges();
// ...
}
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 have seen this error on SO quite a few times, all I can find on it is that I need to make sure that I have my service Provided in my app.modules, and then call it in my constructor of my component. I have done this and am still getting the error. Also I have both http and HTTPMODULES in my application. The error only occurs when I use the delete functionality in my application. Here is the error error_handler.js:45 EXCEPTION: Cannot read property 'get' of undefined, here is some relevant code....
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule, JsonpModule } from '#angular/http'; <------------HTTP
import { AppComponent } from './app.component';
import { PostRantComponent } from './postRant.component';
import { PostDataService } from './PostData.Service'; <------------service
import { Constants } from './app.const.service';
import { Routing } from './app.routes';
import { FormsModule } from '#angular/forms';
#NgModule({
imports: [NgbModule.forRoot(), BrowserModule, Routing, FormsModule, HttpModule, JsonpModule],
declarations: [AppComponent,,PostRantComponent],
providers: [PostDataService, Constants],
bootstrap: [AppComponent]
})
export class AppModule { }
Service (tried cutting it down to just show relevant code)
import { Injectable } from '#angular/core';
import { Http, Response, Headers } from '#angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Observable';
import { PostViewModel } from './models/Post';
import { Constants } from './app.const.service';
#Injectable()
export class PostDataService{
private actionUrl: string;
private headers: Headers;
constructor( private _http: Http, private _constants: Constants ){
this.actionUrl = _constants.ServerWithApi;
this.headers = new Headers();
this.headers.append('Content-Type', 'application/json');
this.headers.append('Accept','application/json');
}
public GetAll = (): Observable<PostViewModel[]> => {
return this._http.get(this.actionUrl)
.map((response: Response) => <PostViewModel[]>response.json())
.catch(this.handleError);
}
public Delete = (id: string) =>{
return this._http.delete(this.actionUrl + id)
.map(res => res.json())
.catch(this.handleError);
}
}
Component
import { Component, Attribute, OnInit,ViewChild } from '#angular/core';
import { PostViewModel } from './models/Post';
import { PostDataService } from './PostData.Service';
import { Constants } from './app.const.service';
#Component({
selector: 'postRant',
templateUrl: 'html/postRant.html',
})
export class PostRantComponent implements OnInit {
txtTitle: string;
txtDescription: string;
public myPosts : Array<PostViewModel>;
public newPost : PostViewModel = new PostViewModel();
constructor(private auth:Auth, private _dataservice: PostDataService){
}
ngOnInit(){
this.getAllItems();
}
private getAllItems():void {
this._dataservice
.GetAll()
.subscribe((Post: Array<PostViewModel>) => this.myPosts = Post,
error => console.log(error),
() => console.log('get all items complete'))
}
delete(id){
console.log(id);
this._dataservice.Delete(id)
.subscribe((res) => {
this.myPosts = res;
});
var index = this.myPosts.findIndex(x => x.id == id);
this.myPosts.splice(index, 1);
}
}
If you are interested in all the code I have it posted on my git located here, however it is rather large.
EDIT
picture of error....
it appears that the error is produced by line 52 of PostData.Service.ts
i.e. var applicationError = error.headers.get('Application-Error');
this makes me guess that your GetAll Http call is erroring out, but the server you are asking for data is not returning data in the format of error.headers
Add a debugger; to the handleError and check the object that it is receiving.