我试图从JSON文件获取数据以构建表单。
这是我模板的一部分:
<div class="form-group">
<label for="power">Power</label>
<select class="form-control" id="power" required>
<option *ngFor="let p of heroes" [value]="p.level">{{p.level}}</option>
</select>
</div>
这是远程JSON文件的一部分:
{
"data": [
{
"level": "newbie",
"places": [
{
"place": "earth",
"categories": [
{
"category": "human",
"values": [
...
它没有问题,我可以newbie
在select
菜单中找到其他选择。但是我想在地方循环播放,因此我以这种方式编辑html模板:
<div class="form-group">
<label for="power">Power</label>
<select class="form-control" id="power" required>
<option *ngFor="let p of heroes[0].places" [value]="p.place">{{p.place}}</option>
</select>
</div>
这是我用来从JSON文件中获取数据的服务:
@Injectable()
export class HeroService {
private url = 'app/mockups/heroes.json';
constructor(private http: Http) { }
getHeroes(): Promise<Hero[]> {
return this.http.get(this.url)
.toPromise()
.then(response => response.json().data as Hero[])
.catch();
}
}
这是hero.component
:
export class HeroComponent implements OnInit {
heroes: Hero[];
constructor(private heroService: HeroService) { }
ngOnInit():void {
this.getHeroes();
}
getHeroes(): void {
this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}
但是我收到“无法读取未定义的属性'0'”错误。
为什么?
我解决了这个问题。我收到此错误是因为我异步获取数据,并且当Angular尝试解析绑定时,第一次数据仍然为null会heroes[0]
失败。
因此,我解决了初始化heroes
数组并使用“ Elvis运算符”的问题:
heroes: Hero[];
而不是heroes: Hero[] = [];
组件中。
heroes[0]?.places
而不是heroes[0].places
在html模板中。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句