NgFor es una directiva estructural que afecta (agrega, modifica o elimina) un elemento HTML. Las directivas estructurales las identificamos porque llevan un * antes de la directiva, por ejemplo: *ngFor
NgFor nos permite recorrer un arreglo de datos y por cada elemento generar o imprimir en el DOM un elemento HTML nuevo, con algún valor cambiado basado en el elemento leído del arreglo.
todo en ingles, pero cuando hay que decir 'array' dice 'arreglo'
el buen spanglish haciendose presente jajaja
home.component.ts
import{Component,OnInit}from'@angular/core';import{User}from'../interfaces/user';@Component({selector:'app-home',templateUrl:'./home.component.html',styleUrls:['./home.component.css']})exportclassHomeComponentimplementsOnInit{friends:User[];constructor(){/*let c: number = 1;
let b: number = 2;
console.log(c + b);
let e: string = '1';
let f: string = '2';
console.log(e + f);
let g: boolean = true;
let h: object = {};
console.log(g);
console.log(h);
let i = [c, b, e, f, g, h];
console.log(i);
let j: boolean [] = [true, g];
console.log(j);
let l: object [] = [{}, h];
console.log(l);
let k: any [] = [1, 'qwe', {}, [], true];
console.log(k);
let myuser: User = {
nick: 'Uriel',
// subnick: 'Uriel',
age: 36,
email: 'a@a.com',
friend: true,
uid: 1
};
console.log(myuser);
let users: User[] = [
myuser
];
console.log(users);*/letusuario1:User={nick:'Eduardo',age:24,email:'ed@aoe.aoe',friend:true,uid:1};letusuario2:User={nick:'Freddy',age:28,email:'fred@aoe.aoe',friend:true,uid:1};letusuario3:User={nick:'Yuliana',age:18,email:'yuli@aoe.aoe',friend:true,uid:1};letusuario4:User={nick:'Ricardo',age:17,email:'rick@aoe.aoe',friend:false,uid:1};letusuario5:User={nick:'Marcos',age:30,email:'marcos@aoe.aoe',friend:false,uid:1};this.friends=[usuario1, usuario2, usuario3, usuario4, usuario5];}ngOnInit(){}}
home.component.html
<p *ngFor="let user of friends; let i = index">{{i +1}}.{{user.nick}}-{{user.email}}</p>
Pueden omitir el 0 escribiendo en la variable del template {{i + 1}}
buenas me sale este error
DevTools failed to parse SourceMap
quien me puede ayudar
gracias
no me funciona!
Debes encerrar el indice en doble llave {{ i }}
{{user.nick}} - {{user.email}}, el nick lo tienes como Use.nick
Les muestro otra forma de realizar lo que el profe realizó en la clase.
Espero sea de ayuda. Cualquier duda estaré atento consulten fast :3
Donde Se encuentra el sistema de Archivos?
Se encuentra en la columna derecha en la clase, en la pestaña más a la derecha.
Puedes ver que hay 4 pestañas, Aportes, Preguntas, Marcadores, Archivos y Enlaces
Muchas Gracias por la respuesta efectivamente los encontré, Gracias
buenas clases
Vscode al escribir en el home.component el codigo {{user.nick}} - {{user.age}} concretamente al escribir user. no me da ninguna posible solución. ¿Alguien sabes una solución?
