web-dev-qa-db-ja.com

Angular2 ngループ値の数を数える方法は？

NgForを使用して8個のjsonオブジェクトをループし、値をループするだけでなく、ループする値の数をカウントしてその数を表示したいです。

たとえば、json値が

Content:{
0:"Content1",
1:"Content2",
2:"Content3",
3:"Content4",
4:"Content5",
5:"Content6",
6:"Content7",
7:"Content8"
}

「コンテンツ」のループ値を表示するだけでなく、結果を以下のようにカウントしたい。

1 <- counting
Content1

2
Content2

3
Content3

4
Content4

5
Content5

6
Content6

7
Content7

8
Content8
jsonangularngfor
14
Lea

配列の反復

ドキュメントについて： https://angular.io/guide/structural-directives#inside-ngfor および https ：//angular.io/api/common/NgForOf

イテラブルがあるとしましょう：

let content = [
  "Content1",
  "Content2",
  "Content3",
  "Content4",
  "Content5",
  "Content6",
  "Content7",
  "Content8"
]

次に、反復してカウントすることができます：

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

オブジェクトプロパティの繰り返し

オブジェクトの配列ではなくオブジェクトを反復処理する場合は、 * ngFor を使用してオブジェクトキーを反復処理する方法を確認します

レコードには、カスタムパイプが必要です。

@Pipe({ name: 'keys',  pure: false })
export class KeysPipe implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value)//.map(key => value[key]);
    }
}

だからそれは

<li *ngFor="let key of objs | keys; let i = index"> ...

更新

Angular 6.1+以降、ネイティブKeyValuePipeを使用できます。

https://blog.angular.io/angular-v6-1-now-available-TypeScript-2-9-scroll-positioning-and-more-9f1c03007bb6#ff4b

https://angular.io/api/common/KeyValuePipe

記録のために：

<li *ngFor="let item of data | keyvalue; let i = index">
  {{i+1}}. {{item.key}} - {{item.value}}
</li>
29
aldo.roman.nurena

Demo

<ul>
  <li *ngFor="let item of items; let i = index">
    {{i}}. {{item}}
  </li>
</ul>
{{items ? items.length : ''}}

あなただけのアイテム配列の長さを印刷することができます。

7
Andrei Voicu