將 *ngIf 與 Angular 2 中的動態變量一起使用

Question

我正在關注這個例子： Angular2.io Example 。

當selectedHero為null ，不應顯示div元素，這可以正常工作，但是當我使用 click 事件選擇一個英雄並且selectedHero不為null ， div元素仍未顯示。

我也嘗試過使用boolean變量，但在更改單擊事件后，變量已更新，但div元素仍未顯示。

  <ul>
    <li *ngFor='let hero of myHeroes' (click)="onSel(hero)">
      <div><label>id: </label>{{hero.id}}</div>
      <div><label>Name: </label>{{hero.name}}</div>
    </li>
  </ul>
</div>
<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>

這是組件代碼：

export class AppComponent {
  title = 'Tour of heroes!';
  selectedHero: Hero;
  HeroesList: Hero[] = [//can also be used to display 
    { id: 11, name: 'Mr. Nice' },
    { id: 12, name: 'Narco' },
    { id: 13, name: 'Bombasto' },
    { 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' }
  ];

  onSel(shero: Hero): void {
    this.selectedHero = shero;
    // alert(this.selectedHero.name);
  }
}

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

Answer 1

您從定義了ngIf @angular/core中丟失了一些導入

看到plunk

ngIf的原因是創建的內容不是有效的 html。

Answer 2

問題出在模板中，ul 元素要在 div 內，否則代碼不起作用，請告訴我原因，謝謝。

    <div>
      <ul>
        <li *ngFor='let hero of myHeroes' (click)="onSel(hero)">
          <div><label>id: </label>{{hero.id}}</div>
          <div><label>Name: </label>{{hero.name}}</div>
        </li>
      </ul>
    </div>

<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>