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

Question

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

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

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

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

index値をdata-index属性に格納するにはどうすればよいですか?

score 1321 · Accepted Answer

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

letではなく、値を宣言するために使用する必要があります#。

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

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

更新された plunkr は次のとおりです: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview。

score 125 · Accepted Answer

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

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

今#i = indexあるべきlet i = index

編集/更新:

*ngForforeach したい要素にある必要があるため、この例では次のようになります。

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

編集/更新

角7/8

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

score 54 · Accepted Answer

以前にすでに回答されていると思いますが、順序付けられていないリストを作成している場合の修正は、*ngFor繰り返したい要素に含まれます。そのため、内側にある必要があります<li>。また、Angular2 は let を使用して変数を宣言するようになりました。

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

score 7 · Accepted Answer

[attr.data-index]を直接使用して、Angular バージョン 2 以降で使用可能な data-index 属性にインデックスを保存できます。

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

9 に答える 9