No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

*ngFor para arrays

13/22
Recursos

鈿狅笍 En el c贸digo de la clase dice *ngFor Objs, y deber铆a ser *ngFor para arrays.

Puedes utilizar聽*ngFor聽para iterar y mostrar cada propiedad de un objeto. Considera que en el componente tienes un array de objetos que representan a una persona:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  peopleArray = [
    {
        firstname: 'Freddy',
        lastname: 'Vega',
        age: 35
    },
    {
        firstname: 'Nicolas',
        lastname: 'Molina',
        age: 29
    },
    {
        firstname: '脕ngela',
        lastname: 'Ocando',
        age: 30
    }
  ];
}

Itera este array en el HTML e imprimimos el valor de cada propiedad de la siguiente manera:

<ul *ngFor="let person of peopleArray">
    <li>Nombre: {{ person.firstname }}</li>
    <li>Apellido: {{ person.lastname }}</li>
    <li>Edad: {{ person.age }}</li>
</ul>

La variable聽person聽guarda temporalmente el objeto en cada iteraci贸n, pudiendo acceder a cada valor usando un聽punto聽seguido del聽nombre de la propiedad.


Tipado de objetos con interfaces

El array聽peopleArray聽puede contener cualquier cosa, y puede ocasionar comportamientos indeseados en tu aplicaci贸n. Puedes crear una interfaz de Personas para tipar los objetos del array y asegurar que todos tengas las mismas propiedades.

interface Person {
    firstname: string;
    lastname: string;
    age: number
}

Tipando el array de la siguiente manera para indicar que el array es de objetos del tipo Persona:

...
peopleArray: Person[] = [
    {
        firstname: 'Freddy',
        lastname: 'Vega',
        age: 35
    },
    ...
 ]

Aporte creado por: Kevin Fiorentino.

Aportes 26

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

El array del profe

products = [
    {
      name: 'EL mejor juguete',
      price: 565,
      image: './assets/images/toy.jpg',
      category: 'all',
    },
    {
      name: 'Bicicleta casi nueva',
      price: 356,
      image: './assets/images/bike.jpg'
    },
    {
      name: 'Colleci贸n de albumnes',
      price: 34,
      image: './assets/images/album.jpg'
    },
    {
      name: 'Mis libros',
      price: 23,
      image: './assets/images/books.jpg'
    },
    {
      name: 'Casa para perro',
      price: 34,
      image: './assets/images/house.jpg'
    },
    {
      name: 'Gafas',
      price: 3434,
      image: './assets/images/glasses.jpg'
    }
  ]

Las im谩genes de Nicolas




Aqu铆 dejo el array de productos con las im谩genes por url, as铆 no hay que desc谩rgalas ni nada, m谩s r谩pido

  products = [
    {
      name: 'EL mejor juguete',
      price: 565,
      image: 'https://raw.githubusercontent.com/platzi/angular-fundamentals/10-step/src/assets/images/toy.jpg',
      category: 'all',
    },
    {
      name: 'Bicicleta casi nueva',
      price: 356,
      image: 'https://raw.githubusercontent.com/platzi/angular-fundamentals/10-step/src/assets/images/bike.jpg'
    },
    {
      name: 'Colleci贸n de albumnes',
      price: 34,
      image: 'https://raw.githubusercontent.com/platzi/angular-fundamentals/10-step/src/assets/images/album.jpg'
    },
    {
      name: 'Mis libros',
      price: 23,
      image: 'https://raw.githubusercontent.com/platzi/angular-fundamentals/10-step/src/assets/images/books.jpg'
    },
    {
      name: 'Casa para perro',
      price: 34,
      image: 'https://raw.githubusercontent.com/platzi/angular-fundamentals/10-step/src/assets/images/house.jpg'
    },
    {
      name: 'Gafas',
      price: 3434,
      image: 'https://raw.githubusercontent.com/platzi/angular-fundamentals/10-step/src/assets/images/glasses.jpg'
    }
  ]

Tambien puedes iterar objetos no solo arrays

  products = {nombre:'juanito',edad:20}

<div>
  <div *ngFor="let item of products | keyvalue ">

    {{item.key}}:{{item.value}}

  </div>
</div>

https://source.unsplash.com/random
para que usen im谩genes random y no est茅n descargando (al final ahorita no importa tanto las im谩genes

Interfaces de typescript
Una interfaz es un modelo que nos indica los atributos de un objeto.

No me lo tomen a mal pero comienzo a amar a este profe, es muy bueno y estoy aprendiendo mucho.

![](
![](
![](
![](

Yo realice mi ejercicio con elementos de papeleria y coloque la imagen mas peque帽a 馃槂

No hay permisos para bajar las imagenes, por fa anteriormente agregaban una pesta帽a de recursos y ahi compartian los archivos o si lo van a ser por git que sea publico

ngFor para arrays

Ya vimos como iterar valores primitivos como strings, numbers, booleans. Pero ahora veremos como iterar array con una structura mas compleja, como lo son los arrays de objetos.

Pasos

1 - Primero debemos tener un array de objetos. Yo usare uno de estudiantes:

students = [
    {
      firstName: 'German',
      lastName: 'Pinilla',
      age: 28,
      isStudent: true,
      image: '../assets/img/img01.jpg',
      category: '',
    },
    {
      firstName: 'Andres',
      lastName: 'Rios',
      age: 30,
      isStudent: true,
      image: '../assets/img/img02.jpg',
    },
    {
      firstName: 'Carlos',
      lastName: 'Diaz',
      age: 26,
      isStudent: false,
      image: '../assets/img/img03.jpg',
    },
    {
      firstName: 'Ricardo',
      lastName: 'Rodriguez',
      age: 26,
      isStudent: true,
      image: '../assets/img/img02.jpg',
    },
    {
      firstName: 'Luis',
      lastName: 'Garcia',
      age: 29,
      isStudent: false,
      image: '../assets/img/img03.jpg',
    },
    {
      firstName: 'Adriana',
      lastName: 'Smith',
      age: 29,
      isStudent: true,
      image: '../assets/img/img04.jpg',
    },
  ];

Este array contiene por cada posicion en el array, un elemento de tipo
objeto, que a su ves contiene unas propiedades (firstName, lastName, age, etc)

2 - Podemos iterar este array de objetos y obtener cada unas de sus propiedades

<div>
  <!-- Iteramos el array students y definimos para cade elemento la variable student -->
  <div *ngFor="let student of students">
    <!-- Cada elemento student contiene las propiedades del objeto por lo que podemos
    istanciarlas con punto elmento.propiedad -->
    <!-- student.image contiene la url de la imagen -->
    <img [src]="student?.image" width="200" style="border-radius: 50%;" alt="image">&nbsp;
    <br>
    <label>Nombre: </label>
    <span>
    <!-- student.firstName contiene el nombre del estudiante y 
    student.lastName contiene el apellido del estudiante -->
      {{ student?.firstName + ' ' + student.lastName }}
    </span>
    <br>
    <label>Edad: </label>
    <!-- student.age contiene la edad del estudiante -->
    <span>{{ student?.age }}</span>
    <br>
    <label>Es estudiante?: </label>
    <!-- student.isStudent contiene la validacion booleana 
    si el usuario es estudiante o no -->
    <span>{{ student?.isStudent ? 'Si es estudiante' : 'No es estudiante' }}</span>
    <hr>
  </div>
</div>

3 - Una forma mas deductiva de conocer las propiedades del array de objetos, es definiendo
una interface donde se declaran cada una de sus propiedades y el tipo de dato que contendra

Nota: Puedo definir la interface en mi propio componente pero es recomendable hacerlo en
un archivo independiente (Como lo hizo el profe), si lo defino el mismo app.component.ts
no es necesario usar export, de otra forma si debo usarlo para luego imporatala interface
en los lugares que lo desee.

export interface Student {
    firstName: string;
    lastName: string;
    age: number;
    isStudent: boolean;
    image: string;
    category?: string;
}

Una vez tenemos a interface en un archivo independiente la importamos en nuestro componente
y definimos el array de objetos students de tipo student heredando las propiedades de la
interface.

import { Component } from '@angular/core';
import { Student } from './student.model'; // <--- Aqui impotamos la interface

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

// Defnimos el array de objetos del tipo Student[]
  students: Student[] = [ 
    {
      firstName: 'German',
      lastName: 'Pinilla',
      age: 28,
      isStudent: true,
      image: '../assets/img/img01.jpg',
      category: '',
    },
    {
      firstName: 'Andres',
      lastName: 'Rios',
      age: 30,
      isStudent: true,
      image: '../assets/img/img02.jpg',
    },
    {
      firstName: 'Carlos',
      lastName: 'Diaz',
      age: 26,
      isStudent: false,
      image: '../assets/img/img03.jpg',
    },
    {
      firstName: 'Ricardo',
      lastName: 'Rodriguez',
      age: 26,
      isStudent: true,
      image: '../assets/img/img02.jpg',
    },
    {
      firstName: 'Luis',
      lastName: 'Garcia',
      age: 29,
      isStudent: false,
      image: '../assets/img/img03.jpg',
    },
    {
      firstName: 'Adriana',
      lastName: 'Smith',
      age: 29,
      isStudent: true,
      image: '../assets/img/img04.jpg',
    },
  ];

}

Aca la respuesta en el navegador:

Comienzo del Tema de Interfaces en Angular

aqui les dejo un array de objetos con mi team de pokemons en Pokemon purpura, para que practiquen armando el suyo:

  pokemonTeam: Pokemon[] = [
    {
      name: 'meowscarada',
      level: 91,
      image: 'https://img.pokemondb.net/sprites/scarlet-violet/normal/meowscarada.png',
      category: 'starter',

    },
    {
      name: 'tinkaton',
      level: 70,
      image: 'https://img.pokemondb.net/sprites/scarlet-violet/normal/tinkaton.png',
      category: 'captured'
    },
    {
      name: 'vespiquen',
      level: 65,
      image: 'https://img.pokemondb.net/sprites/scarlet-violet/normal/vespiquen.png',
      category: 'captured'

    },
    {
      name: 'clodsire',
      level: 72,
      image: 'https://img.pokemondb.net/sprites/scarlet-violet/normal/clodsire.png',
      category: 'captured'

    },
    {
      name: 'golduck',
      level: 68,
      image: 'https://img.pokemondb.net/sprites/scarlet-violet/normal/golduck.png',
      category: 'captured'

    },
    {
      name: 'talonflame',
      level: 73,
      image: 'https://img.pokemondb.net/sprites/scarlet-violet/normal/talonflame.png',
      category: 'captured'
    }
  ]

les dejo la pagina para sacar los sprites para sus propios pokemon, saludos!

https://pokemondb.net/sprites

Ventajas de tiempos modernos, vas a chat gpt3 y le pides que te genere un array de 6 productos con las caracter铆sticas que quieras y listo bendito Drs Chat GPT 3

Aca en mis practicas, lo que hice fue desglosar los partidos politicos actuales de Mexico. Disculpen el zoom porque le coloque mucho texto.

Para las fotos utilice lorem picsum

https://picsum.photos/200/300
        {
          name: 'EL mejor juguete',
          price: 565,
          image: 'https://picsum.photos/200/300',
          category: 'all',
        },

Les dejo el recurso que se vio en el curso de typescript que nos funciona para hacer el typado de un Json de forma automatica

https://app.quicktype.io/

en este caso, para el array que compartio el compa帽ero @Rony Porraz, utilize este c贸digo para transformarlo a JSON

const myJSON = JSON.stringify(products);
console.log(myJSON);

y me regreso el JSON para cargarlo en quicktype, dandome exactamente el mismo c贸digo que el profeso escribi贸 en la interface

export interface Product {
    name:      string;
    price:     number;
    image:     string;
    category?: string;
}

<h1>*ngFor Array</h1>
<div>
  <div *ngFor="let product of products">
    <img width="250" [src]="product.image" alt="image">
    <h2>{{product.price}}</h2>
    <p>{{product.name}}</p>
  </div>
</div>
<h1>*ngFor Object</h1>
<div>
  <div *ngFor="let item of person | keyvalue">
    {{item.key}}:{{item.value}}
  </div>
</div>

Para descargar las im谩genes con GIT, seguir los siguientes pasos:

  1. ir a https://github.com/platzi/angular-fundamentals/tree/10-step
  2. git clone https://github.com/platzi/angular-fundamentals.git
  3. git checkout 10-step

Esto en caso de que descarguen el archivo y no les aparezca la carpeta de imagenes.

Cuando hice el ejercicio, ten铆a corriendo el servidor, puse las im谩genes y no me las mostraba, tuve que parar el servidor y volverlo a iniciar para que cargar lo que hab铆a en assets.

productos = [
{
name: 鈥楪rogu The Mandalorian鈥,
price: 75000,
image: 鈥./assets/images/grogu.jpg鈥,
category: 鈥榓ll鈥,
},
{
name: 鈥楤icicleta madera鈥,
price: 175000,
image: 鈥./assets/images/bici.jpg鈥
},
{
name: 鈥楲ibros鈥,
price: 80000,
image: 鈥./assets/images/libros.jpg鈥
},
{
name: 鈥楥asa para perro鈥,
price: 250000,
image: 鈥./assets/images/casaperro.jpg鈥
},
{
name: 鈥楪afas鈥,
price: 98000,
image: 鈥./assets/images/gafas.jpg鈥
}
]

products = [
{
name: 鈥楳I DUCATI鈥,
price: 鈥$60.000.000鈥,
image: 鈥./assets/imagenes/ducati.png鈥
},
{
name: 鈥楳I FERRARI鈥,
price: 鈥1.513 millones de pesos鈥,
image: 鈥./assets/imagenes/ferrari.jpg鈥
},
{
name: 鈥楳I HARLEY鈥,
price: 鈥10.240 鈧,
image: 鈥./assets/imagenes/harley-davidson.png鈥
},
{
name: 鈥楳I LAMBORGHINI鈥,
price: 鈥300.000 d贸lares en Colombia鈥,
image: 鈥./assets/imagenes/lamborghini.jpg鈥
},
{
name: 鈥楾ESLA鈥,
price: 鈥$255 millones de pesos a la tasa actual鈥,
image: 鈥./assets/imagenes/TESLA.jpg鈥
},
{
name: 鈥榊AMAHA鈥,
price: 鈥5.999 鈧,
image: 鈥./assets/imagenes/Yamaha.jpg鈥
}

]

no puedes poner *ngIf y *ngFor en el mismo elemento. Prueba a poner la sentencia *ngIf en el select, y el *ngFor en los option. Resumiendo, ser铆an select diferentes seg煤n la selecci贸n previa, en vez de opciones diferentes.

<div class="form-group">
  <label for="estado">Estado</label><br>
  <select
    required
    formControlName="estado"
    name="estado"
    class="form-control selectbox"
    #paisSel>
    <option value="">
      Selecciona tu Estado
    </option>
    <option *ngFor="let estado of estados" [value]="estado.key">
        {{estado.nombre}}
    </option>
  </select>
</div>
export class Tiendas {

  public ags:   string[];
  public bc:    string[];

  constructor() {
    this.ags   = [
      'Texto',
      'De'
    ];
    this.bc    = [
      'Ejemplo',
      '...'
    ];
  }
}