Question

我正在尝试创建一个循环来显示几个div，介于1和7之间。

但是，每个div都会有一个<p> Pick your 1st photo </p>，其中第一个项目会说1st，第二个2nd，第三个3rd等等。

我该如何处理这样的事情？

<div *ngFor="let item of items">
  <p>Pick your ___ photo</p>
</div>

由于

Answer 1

在index中使用*ngFor，然后使用ordinal管道转换一个比索引更多的内容：

<div *ngFor="let item of items; let i = index">
    <p>Pick your {{ i + 1 | ordinal }} photo</p>
</div>

ordinal管道：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'ordinal'})
export class OrdinalPipe implements PipeTransform {
    transform(int) {
        const ones = +int % 10, tens = +int % 100 - ones;
        return int + ["th","st","nd","rd"][ tens === 10 || ones > 3 ? 0 : ones ];
    }
}

@Brad's answer和评论提供了有关* ngFor index的重要信息。这个答案扩展了这一点，提供了一个管道来将一个数字（特别是比索引多一个）转换成适当的含序数后缀的字符串，例如，将2转换为"2nd"。请注意，i在管道之前递增，因为index从0开始，而序数从1开始。

Answer 2

*ngFor有一个index变量，您可以按照文档https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

中的说明在循环中访问该变量

<div *ngFor="let item of items; let i = index;">
  <p>Pick your {{ i + 1 }} photo</p>
</div>

由此你应该能够弄清楚如何显示第1，第2，第3等。

Angular 2 - 当你想要展示＆＃34; 1st＆＃34;，＆＃34; 2nd＆＃34;，＆＃34; 3rd＆＃34;等时如何处理* ngFor？

2 个答案: