Agregar la habilidad de eliminar records

Clase 30 de 36 • Curso Básico de Ionic 2018

Juan C Felizzola

student•

Para agregar una imagen como avatar y en los detalles usé Lorem Pixel para generar imagenes aleatorias. Hice lo siguiente:
En home.html en <ion-item> agregué:

<ion-item (click)="irAVistaDeDetalleExistente(lugar)">
    <ion-avatar item-start>
      <img src="http://lorempixel.com/350/230/">
    </ion-avatar>
    <h2>{{ lugar.nombre }}</h2>
    <h3>{{ lugar.direccion }}</h3>
    <p>{{ lugar.categoria }}</p>
</ion-item>

Y en lugar.html en <ion-list> agregué:

<ion-card>
  <img src="http://lorempixel.com/350/230/"/>
</ion-card>

Nathaly Stefani Riaño Bejarano

student•

Genial! No funcionó con lorempixel, así que utilicé pleceimg

home.html
<ion-avatar item-start> <img src="https://placeimg.com/350/230/arch"> </ion-avatar>

lugar.html
<ion-card> <img src="https://placeimg.com/350/230/arch"/> </ion-card>

Alexander Sandoval

student•

Creo que es por el https. Me pasó lo mismo que a @NathaRB.

Pedro Roberto Capriles Morales

student•

Metodo donde cargamos la imagen

uploadPhoto($event):void{
    this.file = $event.target.files[0];

     Functions.getBase64(this.file).then((result)=>{
       console.log(result);
       this.lugar.imagen= result;
      return result;
    });

  }

HTML del formulario desde donde cargaremos la imagen.

 <ion-item>
          <ion-label fixed>Imagen</ion-label>
          <ion-avatar item-end>
            <img *ngIf="lugar.imagen" src="{{lugar.imagen}}">
            <img *ngIf="!lugar.imagen" src="../../assets/imgs/logo.png">
          </ion-avatar>
     </ion-item>
     <ion-item>
        <ion-label stacked>Cargar Imagen</ion-label>
        <ion-input type="file" (change)="uploadPhoto($event)"></ion-input>
      </ion-item>
    <ion-item>

Resultado

La clase abstracta con el método usado para convertir la imagen a base 64 es el siguiente:

export abstract class Functions{
    static getBase64(file:File) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => resolve(reader.result);
          reader.onerror = error => reject(error);
        });
      }
}

Carlos Uriel de Jesus Sánchez González

student•

Es elemental ver el curso de angular

Juan Guillermo Perez Cardozo

student•

en ionic 4 no me salio funciono la confirmacion de la eliminacion. sera investigar

Fabian Bohorquez

student•

Lastima que no suban el contenido del codigo ?

Diego Forero

Team Platzi•

Lo publicaremos pronto.

Fabian Bohorquez

student•

Muchas Gracias GOLLUM23 se que tu trabajo debe ser duro, pero lastimosamente me e fijado que no es el único curso que falta a;adir el código, pero bueno, son cosas que deben mejorar con la practica. como me gustaria que ustedes le compitieran, a las grandes ligas de la educación online.