While following an Angularfire guide, I encountered a puzzling error:
Type 'Observable<{}[]>' is not assignable to type 'Observable<RequestOffer[]>'.
Type '{}[]' is not assignable to type 'RequestOffer[]'.
Type '{}' is not assignable to type 'RequestOffer'.
Property 'request' is missing in type '{}'.
Below is the code snippet from my approve.component.ts where the issue resides:
import { OfferService } from './../offer.service';
import { Offer, Request, RequestOffer } from './../offer.model';
import { Observable } from 'rxjs/Rx';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-approve',
templateUrl: './approve.component.html',
styleUrls: ['./approve.component.css']
})
export class ApproveComponent implements OnInit {
requests$: Observable<RequestOffer[]>;
constructor(private offerService: OfferService) {
this.requests$ = offerService.getOffersByStatus('new');
}
ngOnInit() {
}
}
The contents of offer.model.ts :
export class Offer {
public name: string;
public cost: number;
public date: Date;
public $key: string;
public comments: string;
public currency: string;
constructor(name: string, cost: number, date: Date, currency: string, comments: string) {
this.name = name;
this.cost = cost;
this.date = date;
this.currency = currency;
this.comments = comments;
}
}
export class Request {
public $key: string;
constructor(public email: string, public offerId: string, public status: string) { }
}
export class RequestOffer {
constructor(public request: Request, public offer: Offer) { }
}
In addition to the above issue, when I switch to production mode, I encounter the following error in Chrome's console:
Error: Uncaught (in promise): TypeError: this.db.list(...).map(...).flatMap is not a function
TypeError: this.db.list(...).map(...).flatMap is not a function
at l.getOffersByStatus (offer.service.ts:50)
at new l (approve.component.ts:15)
Contents of offer.service.ts:
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable,
FirebaseObjectObservable } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import { Offer, Request, RequestOffer } from './offer.model';
@Injectable()
export class OfferService {
offer: Offer ;
offers: FirebaseListObservable<any[]>;
requests: FirebaseListObservable<any[]>;
constructor(private db: AngularFireDatabase) {
this.offers = this.db.list('/offers');
this.requests = this.db.list('/requests');
}
getAllOffers() {
return this.offers.map(
(data) => data.map(x => x as Offer)
);
}
deleteOfferByKey($key: string) {
this.offers.remove($key);
}
addOffer(offer: Offer) {
this.offers.push(offer);
}
editOffer(key: string, offer: Offer) {
this.db.object('offers/' + key).update(offer);
}
requestOffer(request: Request) {
this.requests.push(request);
}
getOffersByStatus(status: string) {
const queryList$ = this.db.list('/requests', {
query: {
orderByChild: 'status',
equalTo: status
}
});
return queryList$.map(
requestList => requestList.map(request => this.db.object('offers/' + request.offerId)
.map((offer) => {
return new RequestOffer(request as Request, offer as Offer)
}
)))
.flatMap(fobjs => Observable.combineLatest(fobjs));
}
approveOffer(req: RequestOffer) {
this.db.object('requests/' + req.request.$key +
'/status').set('approved').then;
this.db.object('offers/' + req.offer.$key + '/totalOffers');
alert('Offer Approved!');
}
declineOffer($key: string) {
this.requests.remove($key);
alert('Offer Declined!');
}
}