Angular2:无法读取未定义的属性“名称" [英] Angular2: Cannot read property 'name' of undefined

问题描述

我开始学习 Angular2.我一直在关注 angular.io 提供的英雄教程.一切正常，直到我对使用模板的 HTML 的混乱感到恼火，我在它的位置使用模板 URL，并将 HTML 移动到名为 hero.html 的文件中.生成的错误是无法读取未定义的属性‘名称’".奇怪的是，可以访问指向对象数组的 heros 变量，以便 ngFor 会根据数组中对象的数量生成正确数量的li"标签.但是，无法访问数组对象的数据.此外，即使是包含一些文本的简单变量，也不会在 HTML 中使用 {{}} 括号显示(请参阅提供的代码).

app.component.ts

import { Component } from '@angular/core';@成分({选择器:'我的应用'，templateUrl: './hero.html',styleUrls:['./styles.css']})导出类 AppComponent {title = '英雄之旅';英雄 = 英雄；选择的英雄:英雄；onSelect(英雄:英雄):无效{this.selectedHero = 英雄；}}导出类英雄{身份证号码;名称:字符串；}常量英雄:英雄[] = [{ id: 1, name: '先生.好的' }，{ 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: '智商博士' },{ id: 9, name: 'Magma' },{ id: 10, name: '龙卷风' }];

英雄.html

{{title}}
<h2>我的英雄</h2>
<li *ngFor="让英雄中的英雄"><span class="badge">{{hero.id}}</span>{{英雄名字}}
<h2>{{hero.name}} 详情！</h2><div><label>id: </label>{{hero.id}}

<div><标签>名称:</label><input [(ngModel)]="selectedHero.name" placeholder="name"><div>

这是一张照片:

解决方案

模板中的变量 selectedHero 为 null，因此您无法绑定 selectedHero.name 原样.对于这种情况，您需要使用 elvis operator ?.:

将 [(ngModel)] 分离成 [ngModel] 和 (ngModelChange) 也是需要的，因为你不能赋值到使用 elvis 运算符的表达式.

我也认为你的意思是:

{{selectedHero?.name}} 详情！</h2>

代替:

{{hero.name}} 详情！</h2>

I am beginning to learn Angular2. I've been following the Heroes Tutorial provided at angular.io. All was working fine until, being annoyed by the clutter of HTML using the template, I used template URL in its place, and moved the HTML to a file named hero.html. The error that is generated is, "Cannot read property 'name' of undefined". Strangely, the heroes variable which points to an array of objects can be accessed so that ngFor will produce the correct amount of "li" tags according to the number of objects in the array. However, the data of the objects of the array cannot be accessed. Furthermore, even a simple variable holding some text, will not display using {{}} brackets in the HTML (see provided code).

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>

Here is a photo:

解决方案

The variable selectedHero is null in the template so you cannot bind selectedHero.name as is. You need to use the elvis operator ?. for this case:

<input [ngModel]="selectedHero?.name" (ngModelChange)="selectedHero.name = $event" />

The separation of the [(ngModel)] into [ngModel] and (ngModelChange) is also needed because you can't assign to an expression that uses the elvis operator.

I also think you mean to use:

<h2>{{selectedHero?.name}} details!</h2>

instead of:

<h2>{{hero.name}} details!</h2>

这篇关于Angular2:无法读取未定义的属性“名称"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！