ngFor

在 angular2 里，我们介绍了一个新概念叫"structural directives"，用来描述那些根据表达式在 DOM 上或增加、或删除元素的指令。和其他指令不同，"structural directive"要么作用在template tag上、 要么配合template attribute使用、要么前缀"*"作为简写语法糖。因为这个新语法特性，初学者常常犯错。

你能分辨出来以下错误么？

错误的 ngFor 用法

// a:
<div *ngFor="#item in items">
   <p> {{ item }} </p>
</div>

// b:
<template *ngFor #item [ngForOf]="items">
   <p> {{ item }} </p>
</template>

// c:
<div *ngFor="#item of items; trackBy=myTrackBy; #i=index">
   <p>{{i}}: {{item}} </p>
</div>

来，一步步解决错误

5a：把"in"换成"of"

// incorrect
<div *ngFor="#item in items">
   <p> {{ item }} </p>
</div>

如果有 AngularJS 1 经验，通常很容易犯这个错。在 AngularJS 1 里，相同的repeater写作 ng-repeat="item in items" 。

angular2 将"in"换成"of"是为了和ES6中的 for-of 循环保持一致。也需要记住的是，如果不用"*"语法糖，那么完整的repeater写法要写作 ngForOf ， 而非 ngForIn

// correct
<div *ngFor="#item of items">
   <p> {{ item }} </p>
</div>

5b：语法糖和完整语法混着写

// incorrect
<template *ngFor #item [ngForOf]="items">
   <p> {{ item }} </p>
</template>

混着写是没必要的 － 而且事实上，这么写也不工作。当你用了语法糖(前缀"*")以后， angular2 就会把她当成一个template attribute，而不是一般的指令。具体来说，解析器拿到了 ngFor 后面的字符串， 在字符串前面加上 ngFor ，然后当作template attribute来解析。如下代码：

<div *ngFor="#item of items">

会被当成这样：

<div template="ngFor #item of items">

当你混着写时，他其实变成了这样：

<template template="ngFor" #item [ngForOf]="items">

从template attribute角度分析，发现template attribute后面就只有一个 ngFor ，别的什么都没了。那必然解析不会正确，也不会正常运行了。

如果从从template tag角度分析，他又缺了一个 ngFor 指令，所以也会报错。没了 ngFor 指令， ngForOf 都不知道该对谁负责了。

可以这样修正，要么去掉"*"写完整格式，要么就完全按照"*"语法糖简写方式书写

// correct
<template ngFor #item [ngForOf]="items">
   <p> {{ item }} </p>
</template>

// correct
<p *ngFor="#item of items">
   {{ item }}
</p>

5c：在简写形式里用了错误的操作符

// incorrect
<div *ngFor="#item of items; trackBy=myTrackBy; #i=index">
   <p>{{i}}: {{item}} </p>
</div>

为了解释这儿到底出了什么错，我们先不用简写形式把代码写对了看看什么样子:

// correct
<template ngFor #item [ngForOf]="items" [ngForTrackBy]="myTrackBy" #i="index">
   <p> {{i}}: {{item}} </p>
</template>

在完整形式下，结构还是很好理解的，我们来试着分解一下：

• 我们通过输入属性向 ngFor 里传入了两组数据：

  • 绑定在 ngForOf 上的原始数据集合 items

  • 绑定在 ngForTrackBy 上的自定义track-by函数

• 用 # 声明了两个 local template variables ，分别是： #i 和 #item 。 ngFor 指令在遍历 items 时，给这两个变量赋值

  • i 是从0开始的 items 每个元素的下标

  • item 是对应每个下标的元素

当我们通过"*"语法糖简写代码时，必须遵守如下原则，以便解析器能够理解简写语法：

• 所有配置都要写在 *ngFor 的属性值里

• 通过 = 操作符设置 local variable

• 通过 : 操作符设置input properties

• 去掉input properties里的 ngFor 前缀，譬如： ngForOf ，就只写成 of 就可以了

• 用分号做分隔

按照上述规范，代码修改如下：

// correct
<p *ngFor="#item; of:items; trackBy:myTrackBy; #i=index">
   {{i}}: {{item}}
</p>

分号和冒号其实是可选的，解析器会忽略它们。写上仅仅是为了提高代码可读性。因此，也可以再省略一点点：

// correct
<p *ngFor="#item of items; trackBy:myTrackBy; #i=index">
   {{i}}: {{item}}
</p>