解決済み: インデックス付きの html ngfor

インデックスで ngFor ディレクティブを使用することに関連する主な問題は、反復されるデータが変更されたときに予期しない結果が生じる可能性があることです。 これは、項目が配列に追加または削除されたときにインデックスが自動的に更新されないためです。そのため、新しい項目がインデックス 0 に追加されると、他のすべての項目のインデックスが XNUMX つ下にシフトされます。 これにより、ビューに誤ったデータが表示されたり、アプリケーションで予期しない動作が発生したりする可能性があります。

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

1. このコード行は、順序付けられていないリストを作成します。
2. *ngFor ディレクティブを使用して、項目配列をループし、リスト内の各項目を表示します。
3. let キーワードは、ループの繰り返しで現在の項目を保持する「item」という変数を宣言するために使用されます。
4. let キーワードは、ループの繰り返しで現在の項目のインデックスを保持する「i」という変数を宣言するためにも使用されます。
5. この行は、リスト内の各項目をインデックス番号 (0 から始まる) で表示します。

アンギュラーとは

Angular は JavaScript ベースのオープンソース フロントエンド Web アプリケーション フレームワークであり、主に Google と個人および企業のコミュニティによって維持され、単一ページ アプリケーションの開発で遭遇する多くの課題に対処しています。 JavaScript コンポーネントは、クロスプラットフォーム モバイル アプリの開発に使用されるフレームワークである Apache Cordova を補完します。 クライアント側のモデル - ビュー - コントローラー (MVC) およびモデル - ビュー - ビューモデル (MVVM) アーキテクチャのフレームワークと、リッチ インターネット アプリケーションで一般的に使用されるコンポーネントを提供することで、このようなアプリケーションの開発とテストの両方を簡素化することを目的としています。

ngFor要素

NgFor は、データをループして配列またはオブジェクト内の各項目のテンプレートを作成できるようにする Angular 構造ディレクティブです。 指定された HTML 要素を指定された回数繰り返すために使用されます。 NgFor を使用して、配列、オブジェクト、または文字列からデータを表示できます。 また、配列またはオブジェクトの値に基づいて HTML 要素を生成するためにも使用できます。 NgFor は通常、ngIf や ngSwitch などの他の Angular ディレクティブと組み合わせて使用​​されます。

ngFor要素のインデックスを取得する方法

index キーワードを使用して、ngFor ループ内の要素のインデックスを取得できます。 この構文は次のとおりです。

{{i}} – {{item}}

この例では、「i」変数にループの現在のインデックスが含まれます。 その後、この変数を使用して、リスト内の要素にアクセスしたり変更したりできます。

関連記事:

コメント