在 Angular 2 中将 *ngIf 与动态变量一起使用答案

【问题标题】：Using *ngIf with a dynamic variable in Angular 2在 Angular 2 中将 *ngIf 与动态变量一起使用
【发布时间】：2017-03-28 15:04:41
【问题描述】：

我在关注这个例子：Angular2.io Example。

当selectedHero 是null 时，不应显示div 元素，这很好，但是当我使用点击事件选择英雄并且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;
}

【问题讨论】：

设置selectedHero的代码是什么？
onSel(shero: Hero): void { this.selectedHero = shero; // alert(this.selectedHero.name); } ，这是点击事件
模板点击事件的代码是什么样的？
重新检查代码，我已经更新了
到目前为止一切都很好。 HTML 的顶部是 AppComponent 模板的一部分还是其他组件/指令？

标签： angular angular-ng-if

【解决方案1】：

您缺少来自@angular/core 的一些导入，其中定义了ngIf

见plunk

ngIf 不起作用的原因是创建的内容不是有效的 html。

【讨论】：

我唯一的导入是 import { Component } from '@angular/core';我需要任何导入才能使用 ngIF 指令吗？
也试过这些！仍然无法正常工作............import { Component, NgModule } from '@angular/core';从“@angular/platform-browser”导入 { BrowserModule }；从“@angular/forms”导入 { FormsModule }；
谢谢，问题出在模板中，显示的列表在
内，否则代码不起作用

【解决方案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>

【讨论】：