Angular 2 - ngFor 显示数组中的最后 3 个项目

Question

得到一个包含许多项目的数组，我想显示最后 3 个项目。

进入我的 html

          <li *ngFor="let project of projects;">
            <h2>{{ project.name }}</h2>
            <p>{{ project.meta_desciption }}</p>
          </li>

现在正在显示所有项目（超过 20 个）。我怎样才能只显示最后 3 个？我想我需要在我的代码中使用 "last" somewere，但无法弄清楚 https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

Answer 1

<li *ngFor="let project of (projects | slice:projects.length - 4);">

您可能需要一些额外的 null 检查 projects 或确保它始终是一个数组。

Answer 2

正如上面 Gunter 的回答，您可能还需要检查 "projects" 的长度是否大于 4。

<div *ngIf="projects.length>4">
    <li *ngFor="let project of projects;">
        <h2>{{ project.name }}</h2>
        <p>{{ project.meta_desciption }}</p>
    </li>
</div>

Answer 3

以上 Gunter 的回答对我来说不起作用。我能够完成同样的事情，但略有不同：

<ng-container *ngFor="let project of projects; let i = index">
    <li *ngIf="i > projects.length - 4">
        <h2>{{ project.name }}</h2>
        <p>{{ project.meta_desciption }}</p>
    </li>
</ng-container>

如果循环的索引大于数组的长度减去 4。因此，如果长度小于 3，则打印全部，如果为 3 或更大，则只打印最后 3 个，无论顺序如何进来

Answer 4

在我的例子中，为了获得下面的最后三个项目，代码工作完美，无需检查项目长度，它适用于任何长度的数组。

<li *ngFor="let project of (projects | slice: -3)">

Angular 2 - ngFor 显示数组中的最后 3 个项目

Angular 2 - ngFor display last 3 items in array

ngfor

angular