如何将NGIF与NGFOR一起限制出现的项目

Question

我在Angular中具有此代码

``` 
        <div *ngFor ="let product of category?.products; let i=index" class="col-lg-3 col-md-4 col-sm-1 mix {{ 'cat-' + category?.id }}">
                <div *ngIf="i<2">
                    <app-item-product[product]="product"></app-item-product>
                </div>
        </div>
```

，我需要显示2个结果，但它显示了所有产品

Answer 1

您可以使用slice

<div *ngFor ="let product of (category?.products | slice:0:2); let i=index" class="col-lg-3 col-md-4 col-sm-1 mix {{ 'cat-' + category?.id }}">
                <app-item-product[product]="product"></app-item-product>
    </div>

Answer 2

只需切片阵列即可。

<div *ngFor ="let product of category!.products.slice(0, 2); let i=index">
  <div>
    <app-item-product[product]="product"></app-item-product>
  </div>
</div>

Answer 3

show_more = false;

arr = [1, 2, 3, 4, 5, 6];    


<button (click)="show_more = !show_more">
  <div>{{ show_more ? 'show less' : 'show more...' }}</div>
</button>

<div class="content-wrapper">
  <div class="content" *ngFor="let x of arr; let i = index">
     <div *ngIf="i < 2 || show_more">
        {{ x }}
     </div>
  </div>
</div>

这是一个stackblitz示例，请查看 stackblitz