0

Estoy desarrollando mi primer aplicación web en Angular 10 como el front-end, un API con - de back-end y tengo dudas acerca de como obtener información que se muestra en mi HTML.

Mi aplicación es una aplicación donde puedes buscar libros(Esto lo hago mediante la API de google books) una vez que haces la búsqueda te aparecerá los libros con sus características y en la parte de abajo 2 botones para agregar el libro a una tabla en mi base de datos que contiene los libros favoritos del usuario u otra tabla que contiene los libros pendientes por leer.

introducir la descripción de la imagen aquí

¿Cómo puedo obtener la información de un libro cualquiera al presionar cualquiera de los 2 botones y después de obtener la información que se muestra en el HTML mandarla a mi base de datos mediante mi API Rest?.

Intente hacerlo con ngModel pero el tag de los párrafos e imágenes en HTML no son soportados para hacer eso.

Mi codigo HTML:

<div class="col-12 mt-5" *ngIf="libros">
    <div class="row">
        <div *ngFor="let libro of libros.items" class="col-lg-3 mb-3">
            <div class="text-center">
                <img src="{{libro.volumeInfo.imageLinks.smallThumbnail}}"class="text-center img-book">
                <div class="justify-content-center input-group-append">
                    <label class="text-white">Titulo:&nbsp;</label> <p class="text-white">{{libro.volumeInfo.title}}</p>
                    <p class="text-white" hidden>{{libro.volumeInfo.description}}</p>
                </div>
                <div class="justify-content-center input-group-append">
                    <label class="text-white">Autor(s):&nbsp; </label><p class="text-white">{{libro.volumeInfo.authors}}</p>
                </div>
                <div class="justify-content-center input-group-append">
                    <label class="text-white">Fecha de publicacion:&nbsp;</label><p class="text-white"> {{libro.volumeInfo.publishedDate}}</p>
                </div>
            </div>
            <div  class="text-center">
                <button class="btn btn-danger btn-sm mr-1 mb-2">Agregar Favoritos</button>
                <button class="btn btn-success btn-sm mr-1 mb-2">Agregar a Pendientes</button>
            </div>
            <div class="text-center">
                <a class="btn btn-info btn-sm mr-1" href="{{libro.volumeInfo.infoLink}}">Saber mas...</a>
            </div>
        </div>
    </div>
</div>

Codigo de mi método para agregar libros mediante mi API:

function saveFavBook(req, res){
    var favBook = new FavBook(); //Creamos un objeto favBook
    var params = req.body; //Recojemos los datos que nos llegan por la peticion POST
    //Asignamos los datos que nos llegan por el POST a los campos del objeto favBook para despues guardarlos en BD
    favBook.title = params.title;
    favBook.author = params.author;
    favBook.description = params.description;
    favBook.year = params.year;
    favBook.user = params.user;
    favBook.image = params.image;
    //Guardamos el objecto en BD con el metodo save
    favBook.save((err, favBookStored)=>{
        if(err){
            res.status(500).send({message: "Error al guardar el libro"});
        }else{
            if(!favBookStored){
                res.status(404).send({message: "El libro no se ha guardado"});
            }else{
                res.status(200).send({favBook: favBookStored});
            }
        }
    });
}

1 respuesta 1

0

En el ejemplo hay un arreglo de libros. Cuando se renderiza la vista usando el *ngFor el botón para agregar a favoritos en su evento click llama a la función agregar() y como parámetro se le pasa el libro actual. Y así la función tiene toda la información de ese libro para poder procesarlo.

import { Component } from "@angular/core";
    
    @Component({
      selector: "my-app",
      template: `
        <div
          *ngFor="let libro of libros"
          style="border-style:solid; margin-top: 20px;padding : 20px"
        >
          <span>{{ libro.nombre }}</span
          ><br />
          <button (click)="agregar(libro)">Agregar a favoritos</button>
        </div>
      `
    })
    export class AppComponent {
      libros = [
        {
          nombre: "libro 1",
          id: 1
        },
        {
          nombre: "libro 2",
          id: 2
        }
      ];
    
      agregar(libro: any) {
        console.log(libro);
      }
    }

Ejemplo en vivo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.