Saltar al contenido

Angular – Lista de renderizado utilizando * ngFor directiveJun, 4thIn este tutorial, vamos a aprender acerca de cómo hacer una lista de elementos …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo hacer una lista de elementos en el DOM utilizando * Directiva ngFor.

ngFor

En angulosa, tenemos que utilizar Directiva * ngFor para hacer una lista de elementos en el DOM.

La sintaxis de una directiva * ngFor.

v-for="user in users"

Ejemplo:

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
users = [ { id: 1, name: 'ram' }, { id: 2, name: 'gowtham' }, { id: 3, name: 'ooops' }, ];}

  • {{user.name}}

En el código anterior, que se recorre el conjunto de los usuarios que utilizan * Directiva ngFor, donde variable de usuario está apuntando a la diferente usuario en cada iteración.

acceso al índice

También puede acceder el índice elemento que estamos iterando actualmente. Índice

  • {{user.name}} - {{userIndex}}

es una palabra clave reservada en modo angular que aliasing userIndex para acceder al índice.

Otras cosas que podemos hacer Directiva

ngFor también nos puede proporcionar otras palabras clave reservadas en los que puede alias a las variables locales.

first: boolean: True when the item is the first item in the iterable.
last: boolean: True when the item is the last item in the iterable.
even: boolean: True when the item has an even index in the iterable.
odd: boolean: True when the item has an odd index in the iterable.

Ejemplo de uso :

  • {{user.name}} - {{userIndex}}
    Odd user