主页 / 问题 / 859762
Accepted
Aleksey exec
Asked:2020-07-24 23:37:37 +0000 UTC2020-07-24 23:37:37 +0000 UTC

如何使用 ngFor 仅显示前 4 个项目

  • 772

items数组中有 10 个对象，我只需要使用 size 变量显示前 4 个对象

app.component.html

<div class="prod-section">
  <div  *ngFor="let item of items">
    <h1>{{ item.id }}</h1>
    <p>{{ item.name }}</p>
  </div>
</div>

app.component.ts

  size: number = 4;

  items = [
      { id: 1, name: 'плитка' },
      { id: 2, name: 'плитка' },
      { id: 3, name: 'плитка' },
      { id: 4, name: 'плитка' },
      { id: 5, name: 'плитка' },
      { id: 6, name: 'плитка' },
      { id: 7, name: 'плитка' },
      { id: 8, name: 'плитка' },
      { id: 9, name: 'плитка' },
      { id: 10, name: 'плитка' },
  ];
angular5

1 个回答

  1. Best Answer
    <div *ngFor="let item of items | slice:0:size">
    <h1>{{ item.id }}</h1>
    <p>{{ item.name }}</p>
</div>
    • 1

相关问题