我有一些内容的 ngFor,我想只显示单行中的项目,其余项目应该隐藏,并且卡片应该在单击时展开显示更多。
fruits= [apple, orange, grapes, banana, strawberry, pineapple, watermelon, kiwi, avocado, papaya ]
<div class="more">show more</div>
<div class="less">show less</div>
<ul>
<li *ngfor = let list of fruits>{{list}}</li>
</ul>
在列表中,我只想显示前 3 个其余部分应该隐藏,点击显示更多应该显示。
最佳答案
在您的 .ts 文件中
fruits= ['apple', 'orange', 'grapes', 'banana', 'strawberry', 'pineapple', 'watermelon', 'kiwi', 'avocado', 'papaya' ]
indexToshow = 3;
在您的 HTML 文件中。<div *ngIf="indexToshow == 3" class="more" (click)="indexToshow = fruits.length">show more</div>
<div *ngIf="indexToshow != 3" (click)="indexToshow = 3" class="less">show less</div>
<ul>
<ng-container *ngFor="let list of fruits; index as i">
<li *ngIf="i < indexToshow">{{list}}</li>
</ng-container >
</ul>
你可以用你想要的限制替换 3 值。
关于javascript - 如何在 ngfor 循环中显示隐藏项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64798522/