angular ngFor的使用

属性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
}