Как бы я создал свои узлы Firebase, чтобы иметь поддеревья

Question

Вот мой код. В пунктах Предметы я хочу ввести поддеревья (название, запас, цена), как бы вы go сделали это. Я понял, как вставить данные, но мне сложно найти информацию о том, как выполнить эту задачу. Также, если кто-нибудь знает, как изменить названия ключей деревьев, которые я сделал, напишите бесплатно.

В настоящее время моя база данных выглядит следующим образом:

safika-health-shop

___- items

____- M1tAcaX0d9Ba63WpCQQ

 <insert sub trees>

_______- содержимое: "vcvv"

import {Component, OnInit, Injectable} from '@angular/core';

import { AngularFireDatabase} from '@angular/fire/database';
import { Observable } from 'rxjs';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import {AngularFireStorage} from '@angular/fire/storage';
import {finalize} from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular8Firebase';
  description = 'Angular-Fire-Demo';
  // @ts-ignore
  imageDetailList: AngularFireDatabase<any>;

  itemValue = '';
  // itemValue2 = '';
  // itemValue3 = '';
  // itemValue4 = '';
  // itemValue5 = '';
  items: Observable<any[]>;

  imgSrc: string;
  selectedImage: any;
  isSubmitted: boolean;

  formTemplate = new FormGroup({
    caption : new FormControl('', Validators.required),
    imageUrl : new FormControl('', Validators.required),
  });


  constructor(public db: AngularFireDatabase, public storage: AngularFireStorage) {
    this.items = db.list('items').valueChanges();
  }

  getImageDetailList() {
    this.imageDetailList = this.db.list('imageDetails');
  }
  insertImageDetails(imageDetails) {
    this.imageDetailList.push(imageDetails);
  }

  onSubmit() {
    this.db.list('items').push({ content: this.itemValue});
    // this.db.list('items').push({ content: this.itemValue2});
    // this.db.list('items').push({ content: this.itemValue3});
    // this.db.list('items').push({ content: this.itemValue4});
    // this.db.list('items').push({ content: this.itemValue5});
    this.itemValue = '';
    // this.itemValue2 = '';
    // this.itemValue3 = '';
    // this.itemValue4 = '';
    // this.itemValue5 = '';
  }

  ngOnInit() {
    this.resetForm();
    this.getImageDetailList();
  }

  showPreview(event: any) {
    if (event.target.files && event.target.files[0]) {
      const reader = new FileReader();
      reader.onload = (e: any) => this.imgSrc = e.target.result;
      reader.readAsDataURL(event.target.files[0]);
      this.selectedImage = event.target.files[0];
    } else {
      this.imgSrc = '/assets/img/imgPlaceholder.jpg';
      this.selectedImage = null;
    }
  }

  onSubmit2(formValue) {
    this.isSubmitted = true;
    if (this.formTemplate.value) {
      const filePath = 'images/${this.selectedImage.name.split(".").slice(0,-1).join(".")}_${new Date().getTime()}';
      const fileRef = this.storage.ref(filePath);
      this.storage.upload(filePath, this.selectedImage).snapshotChanges().pipe(
        finalize(() => {
          fileRef.getDownloadURL().subscribe((url) => {
            formValue.imageUrl = url;
            this.insertImageDetails(formValue);
          });
        })
      ).subscribe();
    }
  }

  get formControls() {
    return this.formTemplate.controls;
  }

  resetForm() {
    this.formTemplate.reset();
    this.formTemplate.setValue({
      caption: '',
      imageUrl: ''
    });
    this.imgSrc = '/assets/img/imgPlaceholder.jpg';
    this.isSubmitted = false;
    this.selectedImage = null;
  }

}