如何解决角度显示列表中固定数量的项目,其中显示更多和更少显示按钮
我的名单很长,我只想显示固定数量的商品(例如5)。点击显示更多按钮,列表会变得更大。当列表中的所有项目都呈现后,不显示按钮应出现。在列表大小再次变为5之前,无显示按钮应该可以单击。任何帮助将不胜感激。
这是我的代码:https://stackblitz.com/edit/angular7-viewencapsulation-qwnpff?file=src%2Fapp%2Fapp.component.html 当列表项被添加到列表中或从列表中删除时,我还希望显示0.5s的过渡。
解决方法
您可以这样做:
HTML:
class Product(StandardModelMixin,SoftDeletionModel):
...
class Meta:
constraints = [models.UniqueConstraint(
fields=['sku','retail_store'],name='unique_sku_in_store'
)]
TS:
<ul *ngFor="let l of renderedList" dataRows>
<li>{{l}}</li>
</ul>
<button *ngIf="buttonsVisibility.more" (click)="showMoreOrLess('more')"> show more</button>
<button *ngIf="buttonsVisibility.less" (click)="showMoreOrLess('less')"> showLess</button>
您可以在此处使用以下代码:https://stackblitz.com/edit/angular7-viewencapsulation-yc6wfs
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。