时间戳

首页 > 解决方案 > 如何在 ngfor 循环中显示隐藏项目？

javascript - 如何在 ngfor 循环中显示隐藏项目？

问题描述

对于某些内容，我有一个 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 个其余部分应该被隐藏，单击“显示更多”它应该显示。

标签： javascriptangular

解决方案

在您的 .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 值替换为您想要的限制。

推荐阅读