typescript 在Angular中为'*ngFor'列表制作可重用的“显示更多”按钮的最佳方法[已关闭]

vh0rcniy  于 2022-12-19  发布在  TypeScript
关注(0)|答案(1)|浏览(102)

已关闭。此问题为opinion-based。当前不接受答案。
**想要改进此问题吗?**请更新此问题,以便editing this post可以用事实和引文来回答。

3天前关闭。
Improve this question
我的公司有许多组件,其中项目列表需要被截断到一定数量,同时允许客户单击“显示更多”按钮来显示列表的其余部分。
你觉得最好的方法是什么?
我考虑过一些事情:
1.用于截断的管道,但不会添加“显示更多”按钮
1.“Show more”按钮的自定义组件,但无法处理*ngFor上所需的限制
1.一个自定义的装饰器。还在研究这个,但需要更多地熟悉它们的工作原理。

xn1cxnb4

xn1cxnb41#

当然。最好的办法是限制你绑定的物品,如果长度超过你的最大值,就显示一个“更多”按钮。你也可以稍微做点手脚,像这样做:

// Component
maxItems = 5;
displayItems = this.maxItems;
data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

<!-- Template -->
<ng-container *ngFor="let item of data; let i = index">
  <div *ngIf="i < displayItems">Item {{ item }}</div>
</ng-container>

<div *ngIf="data.length > maxItems">
  <button type="button" (click)="displayItems = displayItems === maxItems ? 9999999 : maxItems">
    {{ displayItems === maxItems ? 'Show More' : 'Show Less' }}
  </button>
</div>

相关问题