なぜ[（ngModel）]は角度4のすべてのテンプレートを分解しますか？

Question

これは最初の角度の成分です。ここにあります：

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要素が大きいので削除しました。私のテンプレートは、私がtemplate要素でこれを使うheroes配列、結合しない ：

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

しかし、私は入力の上、削除し、配列からすべてheroesが正しく<ul>リストに表示されます。

なぜですか？

Answer 1

Angularは選択されたヒーローが存在しないうちにselectedHero.nameを読み取ることができないためです。すべての要素のためにあなたがselectedHeroを使用している -

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

だけでなくinputのために：

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

あなたは selectedHeroはこのように、 *ngIfディレクティブを使用して持っているだけで、この入力を表示する（とする必要がある）ことができます

それとも、より良い1つの*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> 

rのヒーローズ "は角のためだけに私の考えではありません;）

Answer 2

あなたは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>