从Firebase返回的条目未定义

时间:2019-03-13 10:06:36

标签: angular firebase

我有一个角度组件,应该可以通过服务在表格中显示Firebase中的项目:

<table class="table table-sm">
  <thead>
    <th>Animal Name</th>
    <th>Species</th>
    <th>Age</th>
    <th>Last Fed</th>
    <th>Last Shed</th>
    <th>Diet</th>
    <th>Comments</th>
  </thead>
  <ng-container *ngFor="let animal of animalsArray"></ng-container>
  <tr>
    <td>{{animal.animalName}}</td>
    <td>{{animal.species}}</td>
    <td>{{animal.age}}</td>
    <td>
      <button class="btn btn-info">Edit</button>
      <button class="btn btn-danger">Delete</button>
    </td>
  </tr>
</table>

ts代码:

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


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

  constructor(private animalService: AnimalsService) {}
  animalsArray = [];

  ngOnInit() {
    this.animalService.getAnimals().subscribe(
      list => {
        this.animalsArray = list.map(item => {
          return {
            $key: item.key,
            ...item.payload.val()
          }
        })
      }
    );
  }
}

问题是没有我的Firebase条目,表是空的,它给了我这个错误:

AnimalBoardComponent.html:13 ERROR TypeError: Cannot read property 'animalName' of undefined
    at Object.eval [as updateRenderer] (AnimalBoardComponent.html:13)

我做错了什么,导致动物名未定义?

这也是我用来注入的服务:

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(private 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
    });
  }
}

2 个答案:

答案 0 :(得分:1)

您在错误的位置关闭了ng-container。您需要在</tr>标记后关闭它,以便它起作用。

这是更新的代码。

animal-board.component.html

<table class="table table-sm">
  <thead>
    <th>Animal Name</th>
    <th>Species</th>
    <th>Age</th>
    <th>Last Fed</th>
    <th>Last Shed</th>
    <th>Diet</th>
    <th>Comments</th>
  </thead>
  <ng-container *ngFor="let animal of animalsArray">
  <tr>
    <td>{{animal.animalName}}</td>
    <td>{{animal.species}}</td>
    <td>{{animal.age}}</td>
    <td>
      <button class="btn btn-info">Edit</button>
      <button class="btn btn-danger">Delete</button>
    </td>
  </tr>
</ng-container>
</table>

希望这会有所帮助!

答案 1 :(得分:0)

您可以使用以下方法修复它:

 <tbody>
    <tr *ngFor="let animal of animalsArray">
       <td>{{animal.animalName}}</td>
       <td>{{animal.species}}</td>
       <td>{{animal.age}}</td>
       <td>
         <button class="btn btn-info">Edit</button>
         <button class="btn btn-danger">Delete</button>
       </td>
     </tr>
  </tbody>

并删除

<ng-container *ngFor="let animal of animalsArray"></ng-container>