Estoy usando ngFor para hacer un bucle de 8 objetos json y no solo quiero hacer un bucle de los valores, sino que también quiero contar la cantidad de valores de bucle y mostrar el número.
Por ejemplo, si el valor json es
Content:{ 0:"Content1", 1:"Content2", 2:"Content3", 3:"Content4", 4:"Content5", 5:"Content6", 6:"Content7", 7:"Content8" }No solo quiero mostrar los valores de bucle de 'Contenido', sino que también quiero contarlos para que el resultado sea el siguiente.
1 <- counting Content1 2 Content2 3 Content3 4 Content4 5 Content5 6 Content6 7 Content7 8 Content8Con respecto a los documentos: https://angular.io/guide/structural-directives#inside-ngfor y https://angular.io/api/common/NgForOf
Digamos que tienes un iterable:
let content = [ "Content1", "Content2", "Content3", "Content4", "Content5", "Content6", "Content7", "Content8" ]Entonces puedes iterar y contar con:
<li *ngFor="let item of content; let i = index"> {{i+1}} {{item}} </li>Si desea iterar sobre un objeto en lugar de una matriz de objetos, consulte Cómo iterar claves de objetos usando *ngFor
Para el registro, necesita una tubería personalizada:
@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]); } }Entonces eso sería
<li *ngFor="let key of objs | keys; let i = index"> ... Desde Angular 6.1+, puede usar el KeyValuePipe nativo.
https://angular.io/api/common/KeyValuePipe
Para el registro:
<li *ngFor="let item of data | keyvalue; let i = index"> {{i+1}}. {{item.key}} - {{item.value}} </li> <ul> <li *ngFor="let item of items; let i = index"> {{i}}. {{item}} </li> </ul> {{items ? items.length : ''}}Simplemente podría imprimir la longitud de la matriz de elementos.
Hay una variable local llamada count .
<li *ngFor="let user of users; count as c"> {{c}} is number of iterable thing </li>