我有一个角度组件,应该可以通过服务在表格中显示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
});
}
}
答案 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>