javascript - 为什么 [(ngModel)] 破坏 Angular 4 中的所有模板？

Question

这是我的第一个 Angular 组件。在这里:

import { Component } from '@angular/core';

export class Hero{
    id:number;
    name:string;
}

const HEROES: Hero[]=[
  {id:11,name:'Mr. Nice'},
  {id:12,name:'Arco'},
  {id:13,name:'Gillette'},
  {id:14,name:'Celeritas'},
  {id:15,name:'Magneta'},
  {id:16,name:'RubberMan'},
  {id:17,name:'Dynama'},
  {id:18,name:'Dr. Iq'},
  {id:19,name:'Magma'},
  {id:20,name:'TOrnado'}
];


@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1>
            <h2>My heroes</h2>
            <ul class="heroes">
                <li *ngFor="let hero of heroes" (click)="onSelect(hero)">
                    <span class="badge">{{hero.id}}</span> {{hero.name}}
                </li>
            </ul>
            <h2>Details of {{selectedHero.name}}</h2>
            <div><label>Id: </label>{{selectedHero.id}}</div>
            <div>
                <label>Name: </label>
                <input [(ngModel)]="selectedHero.name"/>
            </div>

  `,
  styles: [`

`]
})
export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero: Hero;

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

我删除了styles元素，因为它很大。我的模板没有绑定(bind) heroes数组，当我在 template 中使用它时元素:

<input [(ngModel)]="selectedHero.name"/>

但是当我删除上面的输入时，所有heroes from array 正确显示在 <ul> 中列表。

这是为什么？

Answer 1

您没有设置selectedHero 属性，但您仍然尝试显示和修改它。将英雄详细信息移动到部分并向其添加 ngIf 以仅在设置时显示它:

<div *ngIf="selectedHero">
    <h2>Details of {{selectedHero.name}}</h2>
    <div><label>Id: </label>{{selectedHero.id}}</div>
    <div>
        <label>Name: </label>
        <input [(ngModel)]="selectedHero.name"/>
    </div>
</div>