angular - 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 个？我想我需要在我的代码中使用“最后一个”，但无法弄清楚 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

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

<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 3

正如上面 Gunter 所回答的，您可能还需要检查“项目”的长度是否大于 4。

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

Answer 4

在我的情况下，让代码下面的最后三个项目完美运行，无需检查项目长度，它适用于任何长度的数组。

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

---