Mixing
Firebase good use of Observable (rxjs) on angular 2+
At this moment I'm using Subject from Rxjs without any problem, simple example:
Service
rooms: Room = ;
roomsSubject = new Subject<Room>();
emitRooms() {
this.roomsSubject.next(this.rooms);
}
getRooms() {
firebase.database().ref('/rooms').on('value', data => {
this.rooms = data.val() ? Object.values(data.val()) : ;
console.log(data.val());
this.emitRooms();
}, error => {
console.log("getRooms: ", error);
});
}
Component:
rooms: Room;
roomsSubscription: Subscription;
ngOnInit() {
this.roomService.getRooms();
this.roomsSubscription = this.roomService.roomsSubject.subscribe((rooms: Room) => {
this.rooms = rooms;
});
}
All is working fine but in this case I just need an Observable (I don't emit datas from client). So I tried to update this code to:
getRooms() {
return firebase.database().ref('/rooms').on('value', data => {
return of(data.val());
}, error => {
console.log("getRooms: ", error);
});
}
Component:
ngOnInit() {
this.roomsSubscription = this.roomService.getRooms().subscribe((rooms: Room) => {
this.rooms = rooms;
});
}
Error when subscribe:
error TS2339: Property 'subscribe' does not exist on type '(a:
DataSnapshot, b?: string) => any'
After updating to:
getRooms(): Observable<any> {
I got:
error TS2322: Type '(a: DataSnapshot, b?: string) => any' is not
assignable to type 'Observable'. Property '_isScalar' is
missing in type '(a: DataSnapshot, b?: string) => any'.
All the time I followed stackoverflows to correct my errors and all the time I got new errors. I'm developing on Visual Studio Code.
Is there a chance to use Observable without Angularfire ?
angular
firebase firebase-realtime-database rxjs observable asked Nov 19 '18 at 18:36
CurseCurse
1531111
add a comment |
At this moment I'm using Subject from Rxjs without any problem, simple example:
Service
rooms: Room = ;
roomsSubject = new Subject<Room>();
emitRooms() {
this.roomsSubject.next(this.rooms);
}
getRooms() {
firebase.database().ref('/rooms').on('value', data => {
this.rooms = data.val() ? Object.values(data.val()) : ;
console.log(data.val());
this.emitRooms();
}, error => {
console.log("getRooms: ", error);
});
}
Component:
rooms: Room;
roomsSubscription: Subscription;
ngOnInit() {
this.roomService.getRooms();
this.roomsSubscription = this.roomService.roomsSubject.subscribe((rooms: Room) => {
this.rooms = rooms;
});
}
All is working fine but in this case I just need an Observable (I don't emit datas from client). So I tried to update this code to:
getRooms() {
return firebase.database().ref('/rooms').on('value', data => {
return of(data.val());
}, error => {
console.log("getRooms: ", error);
});
}
Component:
ngOnInit() {
this.roomsSubscription = this.roomService.getRooms().subscribe((rooms: Room) => {
this.rooms = rooms;
});
}
Error when subscribe:
error TS2339: Property 'subscribe' does not exist on type '(a:
DataSnapshot, b?: string) => any'
After updating to:
getRooms(): Observable<any> {
I got:
error TS2322: Type '(a: DataSnapshot, b?: string) => any' is not
assignable to type 'Observable'. Property '_isScalar' is
missing in type '(a: DataSnapshot, b?: string) => any'.
All the time I followed stackoverflows to correct my errors and all the time I got new errors. I'm developing on Visual Studio Code.
Is there a chance to use Observable without Angularfire ?
angular
firebase firebase-realtime-database rxjs observable asked Nov 19 '18 at 18:36
CurseCurse
1531111
add a comment |
At this moment I'm using Subject from Rxjs without any problem, simple example:
Service
rooms: Room = ;
roomsSubject = new Subject<Room>();
emitRooms() {
this.roomsSubject.next(this.rooms);
}
getRooms() {
firebase.database().ref('/rooms').on('value', data => {
this.rooms = data.val() ? Object.values(data.val()) : ;
console.log(data.val());
this.emitRooms();
}, error => {
console.log("getRooms: ", error);
});
}
Component:
rooms: Room;
roomsSubscription: Subscription;
ngOnInit() {
this.roomService.getRooms();
this.roomsSubscription = this.roomService.roomsSubject.subscribe((rooms: Room) => {
this.rooms = rooms;
});
}
All is working fine but in this case I just need an Observable (I don't emit datas from client). So I tried to update this code to:
getRooms() {
return firebase.database().ref('/rooms').on('value', data => {
return of(data.val());
}, error => {
console.log("getRooms: ", error);
});
}
Component:
ngOnInit() {
this.roomsSubscription = this.roomService.getRooms().subscribe((rooms: Room) => {
this.rooms = rooms;
});
}
Error when subscribe:
error TS2339: Property 'subscribe' does not exist on type '(a:
DataSnapshot, b?: string) => any'
After updating to:
getRooms(): Observable<any> {
I got:
error TS2322: Type '(a: DataSnapshot, b?: string) => any' is not
assignable to type 'Observable'. Property '_isScalar' is
missing in type '(a: DataSnapshot, b?: string) => any'.
All the time I followed stackoverflows to correct my errors and all the time I got new errors. I'm developing on Visual Studio Code.
Is there a chance to use Observable without Angularfire ?
angular
firebase firebase-realtime-database rxjs observable asked Nov 19 '18 at 18:36
CurseCurse
1531111
At this moment I'm using Subject from Rxjs without any problem, simple example:
Service
rooms: Room = ;
roomsSubject = new Subject<Room>();
emitRooms() {
this.roomsSubject.next(this.rooms);
}
getRooms() {
firebase.database().ref('/rooms').on('value', data => {
this.rooms = data.val() ? Object.values(data.val()) : ;
console.log(data.val());
this.emitRooms();
}, error => {
console.log("getRooms: ", error);
});
}
Component:
rooms: Room;
roomsSubscription: Subscription;
ngOnInit() {
this.roomService.getRooms();
this.roomsSubscription = this.roomService.roomsSubject.subscribe((rooms: Room) => {
this.rooms = rooms;
});
}
All is working fine but in this case I just need an Observable (I don't emit datas from client). So I tried to update this code to:
getRooms() {
return firebase.database().ref('/rooms').on('value', data => {
return of(data.val());
}, error => {
console.log("getRooms: ", error);
});
}
Component:
ngOnInit() {
this.roomsSubscription = this.roomService.getRooms().subscribe((rooms: Room) => {
this.rooms = rooms;
});
}
Error when subscribe:
error TS2339: Property 'subscribe' does not exist on type '(a:
DataSnapshot, b?: string) => any'
After updating to:
getRooms(): Observable<any> {
I got:
error TS2322: Type '(a: DataSnapshot, b?: string) => any' is not
assignable to type 'Observable'. Property '_isScalar' is
missing in type '(a: DataSnapshot, b?: string) => any'.
All the time I followed stackoverflows to correct my errors and all the time I got new errors. I'm developing on Visual Studio Code.
Is there a chance to use Observable without Angularfire ?
angular
firebase firebase-realtime-database rxjs observable angular
firebase firebase-realtime-database rxjs observable asked Nov 19 '18 at 18:36
CurseCurse
1531111
asked Nov 19 '18 at 18:36
CurseCurse
1531111
asked Nov 19 '18 at 18:36
CurseCurse
1531111
asked Nov 19 '18 at 18:36
CurseCurse
1531111
asked Nov 19 '18 at 18:36
CurseCurse
1531111
1531111
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The reason for error is that you're returning whatever is returned from firebase.database().ref('/rooms').on(...) which is a value of type (a: DataSnapshot, b?: string) => any. What you want to send is Observable instead.
For that, you could simply use Observable.create in this case. And in case of an error, you could use throwError:
...
import { Observable, throwError } from 'rxjs';
...
@Injectable()
export class RoomService {
getRooms(): Observable<any> {
return Observable.create(observer => {
firebase.database().ref('/rooms').on('value', data => {
return observer.next(data.val());
}, error => {
return throwError(error);
});
});
}
}
answered Nov 19 '18 at 19:16
SiddAjmeraSiddAjmera
13.1k31137
Awesome, thank you a lot !
– Curse
Nov 19 '18 at 20:34
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53380738%2ffirebase-good-use-of-observable-rxjs-on-angular-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The reason for error is that you're returning whatever is returned from firebase.database().ref('/rooms').on(...) which is a value of type (a: DataSnapshot, b?: string) => any. What you want to send is Observable instead.
For that, you could simply use Observable.create in this case. And in case of an error, you could use throwError:
...
import { Observable, throwError } from 'rxjs';
...
@Injectable()
export class RoomService {
getRooms(): Observable<any> {
return Observable.create(observer => {
firebase.database().ref('/rooms').on('value', data => {
return observer.next(data.val());
}, error => {
return throwError(error);
});
});
}
}
answered Nov 19 '18 at 19:16
SiddAjmeraSiddAjmera
13.1k31137
Awesome, thank you a lot !
– Curse
Nov 19 '18 at 20:34
add a comment |
The reason for error is that you're returning whatever is returned from firebase.database().ref('/rooms').on(...) which is a value of type (a: DataSnapshot, b?: string) => any. What you want to send is Observable instead.
For that, you could simply use Observable.create in this case. And in case of an error, you could use throwError:
...
import { Observable, throwError } from 'rxjs';
...
@Injectable()
export class RoomService {
getRooms(): Observable<any> {
return Observable.create(observer => {
firebase.database().ref('/rooms').on('value', data => {
return observer.next(data.val());
}, error => {
return throwError(error);
});
});
}
}
answered Nov 19 '18 at 19:16
SiddAjmeraSiddAjmera
13.1k31137
Awesome, thank you a lot !
– Curse
Nov 19 '18 at 20:34
add a comment |
The reason for error is that you're returning whatever is returned from firebase.database().ref('/rooms').on(...) which is a value of type (a: DataSnapshot, b?: string) => any. What you want to send is Observable instead.
For that, you could simply use Observable.create in this case. And in case of an error, you could use throwError:
...
import { Observable, throwError } from 'rxjs';
...
@Injectable()
export class RoomService {
getRooms(): Observable<any> {
return Observable.create(observer => {
firebase.database().ref('/rooms').on('value', data => {
return observer.next(data.val());
}, error => {
return throwError(error);
});
});
}
}
answered Nov 19 '18 at 19:16
SiddAjmeraSiddAjmera
13.1k31137
The reason for error is that you're returning whatever is returned from firebase.database().ref('/rooms').on(...) which is a value of type (a: DataSnapshot, b?: string) => any. What you want to send is Observable instead.
For that, you could simply use Observable.create in this case. And in case of an error, you could use throwError:
...
import { Observable, throwError } from 'rxjs';
...
@Injectable()
export class RoomService {
getRooms(): Observable<any> {
return Observable.create(observer => {
firebase.database().ref('/rooms').on('value', data => {
return observer.next(data.val());
}, error => {
return throwError(error);
});
});
}
}
answered Nov 19 '18 at 19:16
SiddAjmeraSiddAjmera
13.1k31137
edited Nov 19 '18 at 19:28
answered Nov 19 '18 at 19:16
SiddAjmeraSiddAjmera
13.1k31137
answered Nov 19 '18 at 19:16
SiddAjmeraSiddAjmera
13.1k31137
answered Nov 19 '18 at 19:16
SiddAjmeraSiddAjmera
13.1k31137
13.1k31137
Awesome, thank you a lot !
– Curse
Nov 19 '18 at 20:34
add a comment |
Awesome, thank you a lot !
– Curse
Nov 19 '18 at 20:34
Awesome, thank you a lot !
– Curse
Nov 19 '18 at 20:34
Awesome, thank you a lot !
– Curse
Nov 19 '18 at 20:34
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53380738%2ffirebase-good-use-of-observable-rxjs-on-angular-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
