角2 - 「第1」、「第2」、「第3」などを表示したい場合は* ngForを扱う方法は？

Question

ループを作成して1〜7のdivを表示しようとしています。

しかし、各divが最初の項目は1st、二2nd、3rd第3等の

がどのように私はこのような何かを扱うことができると言うだろう<p> Pick your 1st photo </p>を、持っているのだろうか？

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

おかげ

Answer 1

index*ngForとthエン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に関する重要な情報を提供します。この答えは、数値を（具体的にはインデックスよりも1つ多い）適切な序数 - 接尾辞を含む文字列に変換するためのパイプを提供するというものである。 2を"2nd"に変換してください。 indexは0ベースであり、序数は1ベースであるため、iはパイプの前にインクリメントされることに注意してください。

Answer 2

*ngForこのことから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> 

文書で説明したように、第一の表示方法を見つけ出すことができるはずですあなたがループにアクセスすることができindex変数を持っています第2、第3等