属性index、count、first、last、even、odd
- index属性提供当前对象的索引
- count提供当前数据集的长度，类似于datasource.length
- first返回当前列表项是否为第一个
- last返回当前列表项是否为最后一个
- even返回当前列表项index是否为偶数，通常用在增加样式用来区分行与行之间
- odd返回当前列表项index是否为奇数
<ul>
<li *ngFor="let item of datasource; let o=odd,let e=even" [ngClass]="{odd-action: o,even-action: e}">
<card-item [item]="item"></card-item>
</li>
</ul>
实际上first、last、even、odd是在NgForRow（ngFor内部用于生成每个列表项的类）上定义的属性。
export class NgForRow {
constructor(public $implicit: any, public index: number, public count: number) {}
get first(): boolean { return this.index === 0; }
get last(): boolean { return this.index === this.count - 1; }
get even(): boolean { return this.index % 2 === 0; }
get odd(): boolean { return !this.even; }
}
异步管道async
es6中async是异步函数的一个语法糖，和await配合使用让异步函数看上去和同步函数一样
async function fun() {
//返回一个promise对象 通过.then获得返回结果 fun.then(result=>{})
const data = await loadData();
return data;
}
function loadData() {
return new Promise(resolve => {
setTimeout(() => {
resolve('success');
}, 1000)
})
}
在angular中内置管道async能够处理promise和Observable对象，如果我们使用angular的httpClient从服务器获取数据，那么返回的就是一个Observable对象，通过async可以让ngFor直接使用而不必再定义一个变量来专门存储数据。
@Component({
selector: 'app-root',
template: `
<div class="app">
<ul>
<li *ngFor="let item of datasource | async">
<card-item [item]="item" ></card-item>
</li>
</ul>
</div>
`
})
export class Card implements OnInit {
datasource: Observable<Array<any>>;
ngOnInit() {
this.datasource = Observable.of([
{ id: 1, name: 'zhaoyi', age: '18' },
{ id: 2, name: 'qianer', age: '19' },
...
]);
async function fun() {
const data = await loadData();
return data;
}
function loadData() {
return new Promise(resolve => {
setTimeout(() => {
resolve('success');
}, 1000)
})
}
}
}
truckBy
在react中可以通过设置key来关联特定的dom节点来提高渲染效率，angular中的ngFor默认是使用对象作为身份检查，显然效率会稍微差一点，truckBy就可以用来弥补这点。truckBy接受一个函数，函数接受两个参数当前索引index和对象，函数的返回就是用于关联当前dom节点的key，可以直接return index,但是不建议这么做，因为如果数据集的排序变更了那么index也会改变，
使用truckBy不仅仅是能够快速找到对应的dom节点，在数据源发生改变的时候（修改数据或删除几条）angular不会再销毁当前的所有列表项并重新渲染，而是通过key找到指定的dom节点只对它做变更，对于大数据量的列表这点非常重要。
<ul>
<li *ngFor="let item of datasource | async; truckBy: truckById;">
<card-item [item]="item"></card-item>
</li>
</ul>
function truckById(index, item) {
return item.id
}
