Angular

1.先上代码

<div *ngFor="let program of programs | filterBy:typeFilter | filterBy:statusFilter | filterBy:leagueFilter | paginate: { id: 'programPage', itemsPerPage: 5, currentPage: p }; index as i; last as last"><div *ngIf="last">Found {{i + 1}} results on current page.</div></div>

• 这是工作中需要用Angular实现的一段代码，感觉包含了好多很有用但是有坑的东西，在此做做笔记分享。

2.*ngFor中的last参数

• 在使用*ngFor的时候，不但可以使用index as i来获取索引，还可以使用last as last来取到当前DOM对象中已加载的最后一条记录，但是并非整个符合条件数据的最后一条，仅仅是已经加载到DOM当中的最后一条，因为lazy-load的缘故，DOM对象中只加载了当前页面的数据，所以虽然看似很好用，但是想取到所有符合条件的记录数目，该方法并不可行，还是需要自己实现。

3.filterBy过滤器

• 这是angular中的一个过滤器，可以筛选出符合条件的数据，在npm网站上面搜索一下，然后npm install ng2-filter-pipe一下就下载到项目里了，使用的话在根模块中配置声明一下即可。
  根模块中引入并声明

• 使用起来也是很方便的，在*ngFor当中加个管道，格式如| filterBy:typeFilter即可，typeFilter是自己设置的过滤条件。
• 坑的地方来了，在使用filterBy后想取到符合条件的数据条数是不可能的，因为只能取到当前页面的数据，filterBy并不改变DOM中的对象，当filter条件为真时，可以显示过滤后的数据，当取消filter条件时，又可以显示DOM中对象的原有数据。
• 所以，虽然angular中的filter可以把页面做的很炫，因为数据都是绑定起来的，当改变select选项中的filter时，即可改变符合条件的数据，但是在不能满足需求的情况下还是需要重写。

4.分页

• 分页也是一样，在npm中搜索一下，选择了满足条件的ng2-paginate,然后install，成功之后在根模块文件中引起并声明一下即可使用，该分页组件使用起来也很简单，参数并不多，这里是一个该组件的DEMO。
• 同样也是在*ngFor当中加个管道，格式如| paginate: { id: 'programPage', itemsPerPage: 5, currentPage: p };即可，id参数是多个paginate实例在同一页面中时，需要设置其id属性，属性值必须用单引号包裹，itemsPerPage是每页的项目数目，currentPage是当前页。
• 配置好之后，在需要使用的地方加上以下代码即可生效。
  <pagination-controls (pageChange)="p = $event"></pagination-controls>

结语

• 前端Angular打怪升级中，业余写写学习笔记，记录并分享学习心得，欢迎骚扰讨论技术问题。