如何在 ngfor 循環中顯示隱藏項？

Question

我有一些內容的 ngFor，我只想顯示一行中的項目 rest 項目應該被隱藏，卡片應該在點擊顯示更多時展開。

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 rest 應該被隱藏，點擊顯示更多它應該顯示。

Answer 1

在你的.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 值。

Answer 2

你可以試試這個方法，

    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>

Answer 3

這是一個粗略的答案，每次單擊加載更多時都會增加 3

HTML

<ul>
    <li *ngFor="let list of fruitView">{{list}}</li>
</ul>
<button [disabled]="fruitView?.length == fruits?.length" (click)="loadMore()">Load More</button>

零件

export class AppComponent {
public fruits = [
  "apple",
  "orange",
  "grapes",
  "banana",
  "strawberry",
  "pineapple",
  "watermelon",
  "kiwi",
  "avocado",
  "papaya"
];

public fruitView = this.fruits.slice(0, 3);

public loadMore(): void {
  this.fruitView = this.fruits.slice(
    0,
    Math.min(this.fruitView.length + 3, this.fruits.length)
  );
 }
}

https://stackblitz.com/edit/angular-ivy-dmzcd6

Answer 4

您可以使用循環索引根據條件顯示或隱藏。

檢查這個演示

與其他答案不同，這樣您就不需要在每次顯示或隱藏項目時都對數組進行切片和更改，因此數據將始終保持一致。

Answer 5

<tr *ngFor = "let fruit of fruits">
    <ng-template [ngIf] = "fruit"=='apple'>
        <td> show value!</td>
    </ng-template>
</tr>