Exclude items by key with Angularfire2

Viewed 414

I have a Firebase database with this JSON:

"help_text": [{
            "Name": "Blue Dye",
            "Max Stack": 5,
            "Potion Quantity": 1,
            "Price": 10,
            "Stackable": true
        },
        {
            "Name": "Blue Gem",
            "Max Stack": 20,
            "Price": 200,
            "Quest Item": true,
            "Stackable": true
        },
        {
            "Name": "Blue Gem Fragment",
            "Max Stack": 20,
            "Price": 50,
            "Quest Item": true,
            "Stackable": true
        },
        {
            "Name": "Blue Flower",
            "Max Stack": 20,
            "Mesh Y": -0,
            "Model": "blue_flower",
            "Price": 5,
            "Stackable": true
        }
    ...etc etc...

I am using Angular 4 to output the Name fields as headers and the individual items as list items:

app.help-screen component.html

<div class="help-item-box" *ngFor="let item of items | async">
  <h2 class="help-item-title">{{item.Name}}</h2>
  <ul class="help-item-properties">
    <li *ngIf="item['Potion Quantity']">Potion Quantity: {{ item["Potion Quantity"] }}</li>
    <li *ngIf="item.Price">Price: {{ item.Price }}</li>
    <li *ngIf="item.Stackable">Stackable: {{ item.Stackable }}</li>
    <li *ngIf="item['Quest Item']">Quest Item: {{ item["Quest Item"] }}</li>
    <li *ngIf="item['Max Stack']">Max Stack: {{ item["Max Stack"] }}</li>
  </ul>
</div>

app-help-screen.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

@Component({
  selector: 'app-help-screen',
  templateUrl: './app-help-screen.component.html',
  styleUrls: ['./app-help-screen.component.css']
})
export class HelpScreenComponent implements OnInit {
  items: FirebaseListObservable<any[]>;

  constructor(db: AngularFireDatabase) {
    this.items = db.list('help_text');
    console.log(this.items);
  }

  ngOnInit() {
  }

}

This works but it's not very elegant and means the database code will have to be rewritten every time an object with a new property is added. What I would ideally like to do is output all fields as a list item, excluding the name, the model name and the mesh placement value. Looking at the Angularfire2 docs:

https://github.com/angular/angularfire2/blob/master/docs/4-querying-lists.md

there doesn't seem to be a way to exclude items from a query by key. Surely there must be a way to perform such a basic query using Firebase and Angularfire2?

1 Answers
Related