如何在Angular12中限制表格展示的搜索结果条数

问题原因 #

你之前尝试的ngRepeat和limitTo是AngularJS（1.x版本）的语法，你当前使用的是Angular 2+版本，对应的遍历指令是*ngFor，限制条数可以直接用Angular内置的slice管道实现。

具体修改方案 #

修改busqueda.component.html中*ngFor的遍历逻辑，在filter过滤管道后追加slice管道。管道执行顺序是从左到右，会先过滤出匹配结果，再截取指定条数，避免出现先截断再搜索的逻辑错误：

• 限制最多展示10条的写法：

<tbody *ngFor="let acta of actas | filter:filterTerm | slice:0:10">

• 限制最多展示5条的写法：

<tbody *ngFor="let acta of actas | filter:filterTerm | slice:0:5">

上线优化建议 #

后续正式上线如果数据量非常大，不建议全量拉取到前端做过滤截断，最好调整为后端接口支持传入搜索关键词、每页条数、页码，直接返回对应分页的搜索结果，前端只做渲染即可，能大幅提升加载性能和搜索效率。

内容的提问来源于stack exchange，提问作者Lou