Angular2:無(wú)法讀取未定義的屬性“name”我開(kāi)始學(xué)習(xí)Angular2。我一直在關(guān)注angular.io提供的英雄教程。一切正常,直到被使用模板的HTML雜亂所困擾,我在其位置使用模板URL,并將HTML移動(dòng)到名為hero.html的文件。生成的錯(cuò)誤是“無(wú)法讀取未定義的屬性'名稱”。奇怪的是,可以訪問(wèn)指向?qū)ο髷?shù)組的英雄變量,以便ngFor將根據(jù)數(shù)組中的對(duì)象數(shù)量生成正確數(shù)量的“l(fā)i”標(biāo)記。但是,無(wú)法訪問(wèn)陣列對(duì)象的數(shù)據(jù)。此外,即使是包含一些文本的簡(jiǎn)單變量,也不會(huì)在HTML中使用{{}}括號(hào)顯示(請(qǐng)參閱提供的代碼)。app.component.tsimport { 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>
Angular2:無(wú)法讀取未定義的屬性“name”
30秒到達(dá)戰(zhàn)場(chǎng)
2019-09-05 10:01:05