web-dev-qa-db-ja.com

属性の値としてインデックスを持つngFor

私はまた現在のngForを追跡する簡単なindexループを持っています。そのindex値を属性に格納して、印刷できるようにします。しかし、これがどのように機能するのか私にはわかりません。

私は基本的にこれを持っています：

<ul *ngFor="#item of items; #i = index" data-index="#i">
    <li>{{item}}</li>
</ul>

#iの値を属性data-indexに格納したいです。私はいくつかの方法を試しましたが、どれもうまくいきませんでした。

私はここにデモを持っています： http://plnkr.co/edit/EXPOKAEIFlI9QwuRcZqp?p=preview

index値をdata-index属性に格納する方法を教えてください。

angularngfor
369
Vivendi

この構文を使用して、インデックス値をHTML要素の属性に設定します。

<ul>
    <li *ngFor="#item of items; #i = index" [attr.data-index]="i">
        {{item}}
    </li>
</ul>

これは更新されたplunkrです： http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ？p = preview 。

最近のAngular 2リリース用の更新 #ではなくletを使って値を宣言する必要があります。

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="i">
        {{item}}
    </li>
</ul>
648
Thierry Templier

Angular 5/6/7：

<ul *ngFor="let item of items; index as i">
 <li>{{i+1}} {{item}}</li>
</ul>

（ ローカル変数 を参照）

185
Leo

これを更新しただけで、Thierryの答えはまだ正しいのですが、Angular2には次の点に関して更新があります。

<ul *ngFor="let item of items; let i = index" [attr.data-index]="i">
    <li>{{item}}</li>
</ul>

#i = indexはlet i = indexになります。

編集/更新：

*ngForは、あなたが手を差し伸べたい要素の上にあるべきです、それで、この例のためにそれはそうあるべきです：

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="i">{{item}}</li>
</ul>

編集/更新

角5

<ul>
    <li *ngFor="let item of items; index as i" [attr.data-index]="i">{{item}}</li>
</ul>
79
Wesley Coetzee

私はそれが前にすでに答えられたと思います、しかしあなたが順不同のリストに居住しているならばただの訂正、*ngForはあなたが繰り返したい要素の中に来るでしょう。それで、それは<li>の中にあるべきです。また、Angular 2はletを使って変数を宣言するようになりました。

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="i">     
               {{item}}
    </li>
</ul>
47
monica

他の答えは正しいですが、あなたは[attr.data-index]を完全に省略して単に使用することができます

<ul>
    <li *ngFor="let item of items; let i = index">{{i + 1}}</li>
</ul
18
Alf Moh

これを試して

<div *ngFor="let piece of allPieces; let i=index">
{{i}} // this will give index
</div>
0
Chirag