☰

属性の値としてインデックスを使用するngFor 質問する

tag-icon • tag-icon angular ngfor
属性の値としてインデックスを使用する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?

ベストアンサー1

Angular バージョン 17 以降では組み込みの制御フローを使用します。

<ul>
  @for (item of items; track item; let  i = $index) {    
    <li>
        {{i+1}} {{item}}
    </li>
    }
</ul>

Angular バージョン 5 以降:

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

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

角度2-4

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。

おすすめ記事