Angular 2 奇怪的模板作用域行为

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>

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

这是我的预期：

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

这是如何工作的？

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

Answer 1

好的，通过你的 plunker，我对你想要做的事情和你遇到的问题有了更多的了解。

我的工作 plunk 更多细节是 HERE

1. NG-For

当您执行 NG-For 循环时，“#”变量被隔离，仅在循环内。我将其重命名为 "domhero" 这样您就可以看到。

您在 li object 之外对其进行了几次调用，但没有成功。我 re-wrote 将所有标题和内容放入 LI 循环中有点困难。

2。来自 object

的变量

在输入中，您试图从 ng-for 循环内部访问变量，但您无法做到。一旦你关闭了一个循环，你就不能访问那些变量。所以我展示了我绑定到的位置，让你更清楚。

如果你看一下我做的 plunker，我觉得当你到处都用同一个东西命名时（hero，heroes，HEROES，class：hero）会让人感到困惑重命名变量以帮助标记它们的来源。

希望对您有所帮助！

Angular 2 奇怪的模板作用域行为

Angular 2 weird template scope behavior

scope

typescript

angular