En Angular , ngFor es una directiva que cumple el motivo de mostrar una lista repetida de contenidos con menos líneas de código, esto tiene el mismo propósito que los bucles en los lenguajes de programación convencionales.
Podemos imprimir líneas repetidas de contenido basadas en un número usando la función javascript/mecanografiada Array() que generará una lista de números del 0 al n-1. Recorremos esta lista para producir n líneas repetidas de contenido.
Ejemplo 1:
Demo.Component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
//function to return list of numbers from 0 to n-1
numSequence(n: number): Array<number> {
return Array(n);
}
}
Demo.Component.html
<mat-card class="example-card" >
<mat-card-header>
<h2 >Sequence of Numbers from 0 to 5</h2 >
</mat-card-header>
<mat-card-content>
<!-- n traverses through a list of [0, 1, 2, 3, 4, 5] i.e 0 to 5
i stores the index in each iteration -->
<span *ngFor="let n of numSequence(6);
let i = index;">{{i}} </span>
</mat-card-content>
</mat-card>
Producción:
Ejemplo 2:
Insertar plantilla en archivo TypeScript y repetir el mismo elemento 6 veces.
Demo2.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-demo',
//template encapsulated within the component ts file
// instead of separate template(html)
template: '
<mat-card class="example-card" >
<mat-card-header class="example-header">
<h2 >Repeated GeeksforGeeks</h2 >
</mat-card-header>
<mat-card-content>
<ul>
<!--n traverses through a list of [0, 1, 2, 3, 4, 5] i.e 0 to 5
prints GeeksforGeeks for 6 times -->
<li example-card-text
*ngFor="let n of numSequence(6)">
<b>GeeksforGeeks</b></li>
</ul>
</mat-card-content>
</mat-card>
',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
//function to return list of numbers from 0 to n-1
numSequence(n: number): Array<number> {
return Array(n);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por vishnuudai y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA