Angularでのオブジェクトの繰り返し処理(*ngFor)の方法と例


  1. オブジェクトのプロパティを表示する例:
<ul>
  <li *ngFor="let item of items">
    {{ item.property }}
  </li>
</ul>

上記の例では、itemsというオブジェクトの配列をループして、各オブジェクトのpropertyプロパティを表示しています。

  1. オブジェクトのキーと値を表示する例:
<ul>
  <li *ngFor="let item of items | keyvalue">
    {{ item.key }}: {{ item.value }}
  </li>
</ul>

上記の例では、itemsというオブジェクトをループして、各オブジェクトのキーと値を表示しています。keyvalueパイプを使用することで、オブジェクトのキーと値のペアを取得できます。

  1. インデックスを使用してオブジェクトを表示する例:
<ul>
  <li *ngFor="let item of items; let i = index">
    {{ i + 1 }}. {{ item.property }}
  </li>
</ul>

上記の例では、itemsというオブジェクトの配列をループして、各オブジェクトのインデックスとpropertyプロパティを表示しています。let i = indexを使用することで、現在のインデックスを取得できます。

これらはいくつかの基本的な例ですが、実際の使用方法は状況に応じて異なります。Angularのドキュメントやチュートリアルにはさまざまな*ngForの使用例がありますので、参考にすることをおすすめします。