属性の値としてインデックスを持つ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ですか？

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

角度> = 2

letではなくを使用して値を宣言する必要があります#。

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

角度= 1

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

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

Angular 5/6/7/8の場合：

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

古いバージョンでは

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

Angular.io▸API▸NgForOf

• 説明
• ローカル変数

単体テストの例

• ng_for_spec.ts

別の興味深い例

• グルーピング

これを更新しただけで、ティエリーの答えはまだ正しいですが、Angular2は次の点で更新されています。

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

#i = index今でなければなりませんlet i = index

編集/更新：

*ngForそれがあるべきこの例のように、あなたはforeachのに欠けている要素にする必要があります：

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

EDIIT / UPDATE

角度7/8

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

私は以前にすでに回答されていると思いますが、順序付けされていないリストにデータを入力している場合の修正*ngForは、繰り返したい要素に含まれます。だから、それは誠実である必要があり<li>ます。また、Angular2ではletを使用して変数を宣言しています。

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

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

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

あなたは使用することができます[attr.data-インデックス]角度のバージョン2以上で使用でき、データ-index属性にインデックスを保存するために、直接。

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

これを試して

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

laravelページネーションを使用

file.component.ts file

    datasource: any = {
        data: []
    }

    loadData() {
        this.service.find(this.params).subscribe((res: any) => {
            this.datasource = res;
        });
    }

html file

   <tr *ngFor="let item of datasource.data; let i = index">
       <th>{{ datasource.from + i }}</th>
   </tr>