Javascript 如何在ngfor循环中显示隐藏项?
对于某些内容,我有一个ngFor,我只想在单行中显示项目,其余项目应隐藏,卡应在单击“显示更多”时展开Javascript 如何在ngfor循环中显示隐藏项?,javascript,angular,Javascript,Angular,对于某些内容,我有一个ngFor,我只想在单行中显示项目,其余项目应隐藏,卡应在单击“显示更多”时展开 fruits= [apple, orange, grapes, banana, strawberry, pineapple, watermelon, kiwi, avocado, papaya ] <div class="more">show more</div> <div class="less">show le
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>
水果=[苹果、橙子、葡萄、香蕉、草莓、菠萝、西瓜、猕猴桃、鳄梨、木瓜]
显示更多
少展示
- {{list}
在列表中,我只想显示前3个应该隐藏的剩余部分,单击“显示更多”它应该显示。您可以尝试此方法
fruits= [apple, orange, grapes, banana, strawberry, pineapple, watermelon, kiwi, avocado, papaya ]
removeElements = 3;
show(){
this.removeElements=0;
}
hide(){
this.removeElements=3;
}
<ul>
<li *ngfor = let list of fruits.slice(removeElements)>{{list}}</li>
</ul>
水果=[苹果、橙子、葡萄、香蕉、草莓、菠萝、西瓜、猕猴桃、鳄梨、木瓜]
去除元素=3;
show(){
这个。removeElements=0;
}
隐藏(){
这个。去除元素=3;
}
- {{list}
这是一个粗略的答案,每次单击“加载更多”时会增加3
HTML
<ul>
<li *ngFor="let list of fruitView">{{list}}</li>
</ul>
<button [disabled]="fruitView?.length == fruits?.length" (click)="loadMore()">Load More</button>
您可以根据条件使用循环索引来显示或隐藏 检查这个 与其他答案不同,这种方法不需要在每次显示或隐藏项目时对数组进行切片和更改,因此数据将始终保持一致。
<tr *ngFor = "let fruit of fruits">
<ng-template [ngIf] = "fruit"=='apple'>
<td> show value!</td>
</ng-template>
</tr>
显示价值!
在.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>
显示更多信息
少展示
- {{list}
您可以将3值替换为您想要的限制。您可以查看他的
让水果列表。切片(3)
?然后单击show moreHi Hesan如何显示完整列表。虽然本准则可以回答该问题,但提供关于本准则为什么和/或如何回答该问题的附加上下文可提高其长期价值。亲切的问候。
<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>