Angular2:无法读取未定义的属性"name"

Question

我开始学习Angular2.我一直在关注angular.io提供的英雄教程.一切正常,直到被使用模板的HTML杂乱所困扰,我在其位置使用模板URL,并将HTML移动到名为hero.html的文件.生成的错误是"无法读取未定义的属性'名称".奇怪的是,可以访问指向对象数组的英雄变量,以便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>

这是一张照片:

Answer 1

变量selectedHero在模板中为null,因此您无法按原样绑定selectedHero.name.在这种情况下,您需要使用elvis运算符:

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

还需要在[ngModel]和(ngModelChange)中分离[(ngModel)],因为您无法分配使用elvis运算符的表达式.

我也认为你的意思是:

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

代替:

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

Answer 2

你只需要进一步阅读,你就会被引入*ngIf结构指令.

selectedHero.name尚不存在,因为用户尚未选择英雄,因此返回undefined.

<div *ngIf="selectedHero">
  <h2>{{selectedHero.name}} details!</h2>
  <div><label>id: </label>{{selectedHero.id}}</div>
  <div>
    <label>name: </label>
    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
  </div>
</div>

*ngIf指令使selectedHero脱离DOM,直到它被选中,因此变得真实.

这份文件帮助我理解了结构指令.

Answer 3

之所以出现此错误，是因为您遵循了Heroes教程上写得不好的指示。我遇到了同样的事情。

具体来说，在模板中的“显示英雄姓名 ”标题下，它指出：

要在无序列表中显示英雄名称，请在标题下方和英雄详细信息上方插入以下HTML块。

随后是此代码块：

<h2>My Heroes</h2>
<ul class="heroes">
  <li>
    <!-- each hero goes here -->
  </li>
</ul>

它不指示您替换以前的详细代码，应该这样做。这就是为什么我们只剩下：

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

在我们的外面*ngFor。

但是，如果您进一步向下滚动页面，则会遇到以下情况：

显示英雄的模板应如下所示：

<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

请注意，以前的工作缺少细节元素。

作者这样的错误可能会导致疯狂的追逐。希望这篇文章可以帮助其他人避免这种情况。

Answer 4

为了避免这种情况，您还可以selectedHero将组件的成员初始化为一个空对象（而不是使其保持未定义状态）。

在您的示例代码中，将给出以下内容：

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero:Hero = new Hero();

  onSelect(hero: Hero):void{
      this.selectedHero = hero;
  }
}