Struggling to get model + observable + firebase to work

Question

I have a data model that looks something like this (summary, not the full thing):

export class Magus {
  public characterid: string;
  public playerUID: string;
  public covenantID: string;
  public info: Info;
  public infoMagus: InfoMagus;
  public virtues: Merit[];
  public flaws: Merit[];
  public characteristics: Characteristics;
  public abilities: Abilities[];
  public arts: Arts;
  public spells: Spells[];
  public labtotals: LabTotals;
  public enchantedDevice: EnchantedDevice[];
  public familiar: Familiar;
  public activities: Activities[];
  public armour: Armour;
  public weapons: Weapons[];
  public equipment: Equipment[];
  public personality: Personality[];
  public charHistory: CharHistory;
  public notes: Notes[];
  public agingWarping: AgingWarping;
  public reputation: Reputation[];
  public vis: Vis[];
  public seasonalActivities: SeasonalActivities[];
  public journal: Journal[];
  public chargen: Chargen;
  public playerChar: boolean;

  constructor(characterid: string, playerUID: string, covenantID: string, info: Info, infoMagus: InfoMagus, virtues: Merit[], flaws: Merit[], characteristics: Characteristics, abilities: Abilities[], arts: Arts, spells: Spells[],
    labtotals: LabTotals, enchantedDevice: EnchantedDevice[], familiar: Familiar, activities: Activities[], armour: Armour, weapons: Weapons[], equipment: Equipment[], personality: Personality[], charHistory: CharHistory,
    notes: Notes[], agingWarping: AgingWarping, reputation: Reputation[], vis: Vis[], seasonalActivities: SeasonalActivities[], journal: Journal[], chargen: Chargen, playerChar: boolean) {
    this.characterid = characterid;
    this.playerUID = playerUID;
    this.covenantID = covenantID;
    this.info = info;
    this.infoMagus = infoMagus;
    this.virtues = virtues;
    this.flaws = flaws;
    this.characteristics = characteristics;
    this.abilities = abilities;
    this.arts = arts;
    this.spells = spells;
    this.labtotals = labtotals;
    this.enchantedDevice = enchantedDevice;
    this.familiar = familiar;
    this.activities = activities;
    this.armour = armour;
    this.weapons = weapons;
    this.equipment = equipment;
    this.personality = personality;
    this.charHistory = charHistory;
    this.notes = notes;
    this.agingWarping = agingWarping;
    this.reputation = reputation;
    this.vis = vis;
    this.seasonalActivities = seasonalActivities;
    this.journal = journal;
    this.chargen = chargen;
    this.playerChar = playerChar;
  }
}

(the other classes are also there, but excluding those or this is going to turn into a really big essay)

In my home component, I can successfully return all magi characters using:

magi: Magus[] = [];    

getMagi() {
   this.subscription = this.characterDataService.getMages()
   .subscribe(magi => this.magi = magi);
}

It calls a function in the service file:

getMages() {
  this.magiCollection = this.firestore.collection<Magus>('magi');
  this.magi = this.magiCollection.valueChanges();
  return this.magi
}

The problem lies when I want to get the full details of one character, using the character uuid (which I have a document field in my firestore DB). The following is not working:

magus: Observable<Magus>;

getCharacter() {
    if (this.collection === 'magi') {
      this.magus = this.characterDataService.getCharacterDetail(this.charid, this.collection)
      .subscribe(magi => this.magus = magi);
    }
  }

In the service:

getCharacterDetail (charID: string, collection: string) {
    this.magiCollection = this.firestore.collection<Magus>(collection, ref => ref.where('characterid', '==', charID));
    return this.magiCollection.valueChanges();
  }

TLDR: What I am trying to do is get the data from a firestore collection and map it back to my data model (Magus) so that I can display the character details, update it, etc. This is why I would like it as an observable so that calculations can update dynamically. My current error with getCharacter is: Type 'Subscription' is missing the following properties from type 'Observable': _isScalar, source, operator, lift, and 6 more.ts(2740)

But even if I change it, I then end up with Observable<Magus[]>' is not assignable to type 'Observable. Something is clearly wrong, but I have no idea how to fix it.

Answer 1

From looking at your code, you’ve subscribed to the call and inside your saying you want this.magus to equal your object magi but this.magus is a type of observable, so you need to say this.magus = Observable.of(magi)

Long story short you need to ensure this.magus is assigned a type observable of Magus