我开始学习Angular2。我一直在关注angular.io提供的《英雄教程》。一切工作都很好,直到由于使用模板而使HTML混乱不堪,我才使用模板URL,并将HTML移至名为hero.html的文件中。生成的错误是,“无法读取未定义的属性'名称'”。奇怪的是,可以访问指向对象数组的heroes变量,以便ngFor根据数组中对象的数量生成正确数量的“ li”标签。但是,无法访问数组对象的数据。此外,即使是包含一些文本的简单变量,也不会在HTML中使用{{}}括号显示(请参见提供的代码)。
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './hero.html',
styleUrls:['./styles.css']
})
export class AppComponent {
title = 'Tour of Heroes';
heroes = HEROES;
selectedHero:Hero;
onSelect(hero: Hero):void{
this.selectedHero = hero;
}
}
export class Hero{
id: number;
name: string;
}
const HEROES: Hero[] = [
{ id: 1, name: 'Mr. Nice' },
{ id: 2, name: 'Narco' },
{ id: 3, name: 'Bombasto' },
{ id: 4, name: 'Celeritas' },
{ id: 5, name: 'Magneta' },
{ id: 6, name: 'RubberMan' },
{ id: 7, name: 'Dynama' },
{ id: 8, name: 'Dr IQ' },
{ id: 9, name: 'Magma' },
{ id: 10, name: 'Tornado' }
];
hero.html
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<h2>{{hero.name}} details!</h2>
<div>
<label>id: </label>{{hero.id}}
</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name" placeholder="name">
<div>
这是一张照片:
变量selectedHero在模板中为null,因此无法按原样绑定selectedHero.name。在这种情况下,您需要使用elvis运算符:
<input [ngModel]="selectedHero?.name" (ngModelChange)="selectedHero.name = $event" />
还需要将[ngModel]中的[(ngModel)]和(ngModelChange)分开,因为您不能将其分配给使用elvis运算符的表达式。
我也认为您打算使用:
<h2>{{selectedHero?.name}} details!</h2>
代替:
<h2>{{hero.name}} details!</h2>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句