Question

刚刚浏览了Tour of Heroes tutorial app并在我的模板中遇到了一些有趣的行为。我使用以下代码开始了本教程的第二部分：

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

@Component({
  selector: 'my-app',
  template:`
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <div><input [(ng-model)]="hero.name" placeholder="name"></div>
    </div>
    `,
  directives: [FORM_DIRECTIVES]
})

class AppComponent {
  public title = 'Tour of Heroes';
  public hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

当指示将新英雄数组（var HEROES: Hero[] = [ /* Hero Data */];）和新属性添加到我的组件时，我假设我们正在替换原始hero属性并最终得到：

class AppComponent {
  public title = 'Tour of Heroes';
  public heroes = HEROES;
}

接下来，模板被修改如下：

<h1>{{title}}</h1>
<ul class="heroes">
  <li *ng-for="#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>
  <div><input [(ng-model)]="hero.name" placeholder="name"></div>
</div>

在浏览器中，无序列表会在数组中每li个呈现一个hero，但不会打印name或id。疯。经过一些修修补补后，我意识到如果我将原来的hero属性添加回AppComponent类，那么数组中的所有英雄都会被渲染得很好。另外，如果我只删除引用hero循环中ng-for属性而不是的任何模板代码，那么列表也可以正常呈现。

这是我的预期：

在我的原始版本中，数组中的所有英雄都应该反映在无序列表中，但是循环外的所有英雄值都应该是未定义的，或者可能是列表中的最后一项。 / p>
当我加回原来的英雄属性时，应该存在某种名称冲突或其他一些副作用。

这是如何运作的？

编辑：这是请求的plunker：http://plnkr.co/edit/U3bSCaIOOjFdtw9XxvdR?p=preview

Answer 1

好的，你的傻瓜我得到了你想要做的更多和你遇到的问题。

我的工作内容包含更多详情HERE

<强> 1。 NG-对于

执行NG-For循环时，“＃”变量仅隔离在循环内部。我把它改名为“domhero”，你可以看到。

你在li对象的外面有几次调用，这是行不通的。我重新写了一下，将所有的标题和内容放在LI循环中。

<强> 2。来自对象的变量

在输入上，您试图从ng-for循环内部访问变量，但您无法做到这一点。关闭循环后，您无法访问这些变量。所以我展示了我的约束力，让你更清楚。

我认为当你有很多东西在同一个地方命名相同的东西（英雄，英雄，英雄，阶级：英雄）时，如果你看一下我制作的那个东西我改名为变量以帮助标记他们来自哪里。

希望它有所帮助！

Angular 2奇怪的模板范围行为

1 个答案: