Angular 2 - ng用于显示数组中的最后3项

时间:2016-08-16 13:13:40

标签: angular ngfor

有一个包含许多项目的数组,我想显示最后3个项目。

进入我的HTML

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

现在显示所有项目(超过20个)。 我怎么才能只显示最后3个? 我想我需要使用&#34; last&#34;有些人在我的代码中,但无法弄明白 https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

2 个答案:

答案 0 :(得分:4)

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个

答案 1 :(得分:1)

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

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