Angular не может прочитать push свойства undefined при публикации в firebase

Question

Я делаю форму, которая отправляет информацию в базу данных для изучения работы CRUD с Angular6 и Firebase, однако при отправке я получаю:

AddNewAnimalComponent.html:5 ERROR TypeError: Cannot read property 'push' of undefined
    at AnimalsService.push../src/app/animals.service.ts.AnimalsService.insertAnimal (animals.service.ts:32)
    at AddNewAnimalComponent.push../src/app/add-new-animal/add-new-animal.component.ts.AddNewAnimalComponent.onSubmit (add-new-animal.component.ts:24)
    at Object.eval [as handleEvent] (AddNewAnimalComponent.html:5)
    at handleEvent (core.js:23097)
    at callWithDebugContext (core.js:24167)
    at Object.debugHandleEvent [as handleEvent] (core.js:23894)
    at dispatchEvent (core.js:20546)
    at core.js:22036
    at SafeSubscriber.schedulerFn [as _next] (core.js:13517)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)

Я отлаживал и просматривал свой код построчно, но все еще не могу найти, почему он не определен, что я делаю неправильно? Вот моя форма HTML:

<label>Last Fed</label>
    <input type="date" formControlName="lastFed" class="form-control">
    </div>
    <div class="form-group">
    <label>Last Shed</label>
    <input type="date" formControlName="lastShed" class="form-control">
    </div> <div class="form-group">
    <label>Diet</label>
    <input formControlName="diet" class="form-control" [ngClass]="{'is-invalid': submitted && formControl.animalName.errors}">
    <div class="invalid-feedback" *ngIf="submitted && formControl.animalName.errors">
      Each animal's diet must be known
     </div>
     </div>
     <div class="form-group">
     <label>Comments</label>
      <textarea formControlName="comments" class="form-control"> </textarea>
     </div>
     <div class="form-group">
    <input type="submit" class="btn btn-primary" value="Submit">
    </div>
    </form>
    <div class="alert alert-info" *ngIf="succesMessage">
      Submitted successfully.
    </div>
  </div>
</div>
</div>

моя форма ts:

import { Component, OnInit } from '@angular/core';
import { AnimalsService } from '../animals.service';

@Component({
  selector: 'app-add-new-animal',
  templateUrl: './add-new-animal.component.html',
  styleUrls: ['./add-new-animal.component.scss']
})
export class AddNewAnimalComponent implements OnInit {

  constructor(public animalsService: AnimalsService) { }
  submitted: boolean;
  succesMessage: boolean;
  formControl = this.animalsService.form.controls;

  ngOnInit() {

  }

  onSubmit() {
    this.submitted = true;
    if(this.animalsService.form.valid) {
      if(this.animalsService.form.get('$key').value == null)
      this.animalsService.insertAnimal(this.animalsService.form.value);
      this.succesMessage = true;
      setTimeout(() => this.succesMessage = false, 3000);
      this.submitted = false;
    }
  }
}

и мой сервис, который подключается к firebase:

import { Injectable } from '@angular/core';
import { FormControl, FormGroup, Validators} from '@angular/forms';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

@Injectable({
  providedIn: 'root'
})

export class AnimalsService {

  constructor(public firebase: AngularFireDatabase) {}

  animalList: AngularFireList<any>

  form = new FormGroup({
    $key: new FormControl(null),
    animalName: new FormControl('', Validators.required),
    species: new FormControl('', Validators.required),
    age: new FormControl(''),
    lastFed: new FormControl(''),
    lastShed: new FormControl(''),
    diet: new FormControl('', Validators.required),
    comments: new FormControl('')
  });

  getAnimals() {
    this.animalList = this.firebase.list('animals');
    return this.animalList.snapshotChanges();
  }

  insertAnimal(animal) {
     this.animalList.push({
      animalName: animal.animalName,
      species: animal.species,
      age: animal.age,
      lastFed: animal.lastFed,
      lastShed: animal.lastShed,
      diet: animal.diet,
      comments: animal.comments
    });
  }
}

Answer 1

Ваш animalList в AnimalsService равен нулю в тот момент, когда вы хотите вставить этот список.Насколько я вижу в вашем коде, getAnimals() никогда не вызывается, поэтому этот массив равен нулю.

Вы можете либо вызвать getAnimals() ngOnInit():

ngOnInit() {
  this.getAnimals();
}

или вы также можете добавить пустой AngularFireList при объявлении animalList или в конструкторе.

Answer 2

Локальная переменная animalList изначально не определена, когда вы объявляете ее так:

animalList: AngularFireList<any>

Либо присвойте ей начальное значение в объявлении, как это

animalList: AngularFireList<any> = new AngularFireList()

, либо присвойте значениек переменной в конструкторе

constructor(public firebase: AngularFireDatabase) {
  this.animalList = initialValue
}

или из вашего кода у вас уже есть функция getAnimals , в зависимости от контекста используйте ее либо внутри конструктора, либо вызовите ее после инициализации компонента (ngOnInit)