0

Estoy creando una aplicación con temática tienda web sobre libros. El problema que estoy teniendo es que quiero mostrar las cards donde se mostrará cada libro con la información con un ngFor. Pero no me funciona y no me da errores.

Componente book-card.component.html

<div class="book">
    <div class="book-image">
        
    </div>
    <div class="book-info">
        <h1 class="book-info-title">{{book.name | uppercase}}</h1>
        <h3>{{book.description}}</h3>
        <p class="product-info-description">{{book.description}}</p>
        <div class="product-info-price">
            <h1>{{book.price | number | currency}}</h1>
        </div>
    </div>
    <div class="book-action">
        <button  [disabled]="!(book.unitsAvailable > 1)" class="book-action-btnBuy">BUY</button>
        <button  class="book-action-btnAdd">+ CART</button>
    </div>
</div>

Componente book-card.component.ts

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';


@Component({
  selector: 'app-book-card',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './book-card.component.html',
  styleUrl: './book-card.component.scss'
})
export class BookCardComponent {
  @Input() book: any;

}

Componente book.component.html

  <div class="title">
        <h1>Saga de libros Harry Potter</h1>
    </div>

    <div class="books">
        <ng-container *ngFor="let book of books">
                <div class="book">
                        <app-book-card [book]="book"></app-book-card>
                </div>
        </ng-container>
    </div>

Componente book.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BookCardComponent } from "../book-card/book-card.component";


export const books = [
    {
      image:
        '',
      name: 'Harry Potter y la Piedra Filosofal',
      description:
        'Descripcion',
      unitAvailable: '34',
      price: '20.00',
      category: 'Aventura, Magia, Misterio'
    },
    {
      image:
        '',
      name: 'Harry Potter y La Camara Secreta',
      description:
        'Descripcion',
      unitAvailable: '21',
      price: '20.00',
      category: 'Aventura, Magia, Misterio'
    },
    {
      image:
        '',
      name: 'Harry Potter y El Prisionero de Azkaban',
      description:
        'Descripcion',
      unitAvailable: '21',
      price: '20.00',
      category: 'Aventura, Magia, Misterio'
    },

    {
      image:
        '',
      name: 'Harry Potter y El Cáliz de Fuego',
      description:
        'Descripcion',
      unitAvailable: '35',
      price: '20.00',
      category: 'Aventura, Magia, Misterio'
    },
   
    {
      image:
        '',
      name: 'Harry Potter y La Órden del Phoenix',
      description:
        'Descripcion',
      unitAvailable: '21',
      price: '20.00',
      category: 'Aventura, Magia, Misterio'
    },
    {
      image:
        '',
      name: 'Harry Potter y El Misterio del Príncipe',
      description:
        'Descripcion',
      unitAvailable: '10',
      price: '20.00',
      category: 'Aventura, Magia, Misterio'
    },
    {
      image:
        '',
      name: 'Harry Potter y Las Reliquias de La Muerte',
      description:
        'Descripcion',
      unitAvailable: '4',
      price: '20.00',
      category: 'Aventura, Magia, Misterio'
    },
    {
      image:
        '',
      name: 'Harry Potter y El Legado Maldito',
      description:
        'Descripcion',
      unitAvailable: '50',
      price: '20.00',
      category: 'Aventura, Magia, Misterio'
    },
  ];

@Component({
    selector: 'app-books',
    standalone: true,
    templateUrl: './books.component.html',
    styleUrl: './books.component.scss',
    imports: [BookCardComponent, CommonModule]
})
export class BooksComponent {
books: any;

}

En sí al ejecutarlo no me da ningún error pero no me muestra nada, no se se me faltará algo o si es necesario importar algún módulo para que funcione.

1 respuesta 1

1

Lo que ocurre es que dentro del componente no estás definiendo lo que debería ser llamado, simplemente has definido una variable con el mismo nombre que está fuera de la "fuente":

Componente book.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BookCardComponent } from "../book-card/book-card.component";

@Component({
    selector: 'app-books',
    standalone: true,
    templateUrl: './books.component.html',
    styleUrl: './books.component.scss',
    imports: [BookCardComponent, CommonModule]
})
export class BooksComponent {

books = [
    {
      image:
        '',
      name: 'Harry Potter y la Piedra Filosofal',
      description:
        'Descripcion',
      unitAvailable: '34',
      price: '20.00',
      category: 'Aventura, Magia, Misterio'
    },
    {
      image:
        '',
      name: 'Harry Potter y La Camara Secreta',
      description:
        'Descripcion',
      unitAvailable: '21',
      price: '20.00',
      category: 'Aventura, Magia, Misterio'
    },
    {
      image:
        '',
      name: 'Harry Potter y El Prisionero de Azkaban',
      description:
        'Descripcion',
      unitAvailable: '21',
      price: '20.00',
      category: 'Aventura, Magia, Misterio'
    },

    {
      image:
        '',
      name: 'Harry Potter y El Cáliz de Fuego',
      description:
        'Descripcion',
      unitAvailable: '35',
      price: '20.00',
      category: 'Aventura, Magia, Misterio'
    },
   
    {
      image:
        '',
      name: 'Harry Potter y La Órden del Phoenix',
      description:
        'Descripcion',
      unitAvailable: '21',
      price: '20.00',
      category: 'Aventura, Magia, Misterio'
    },
    {
      image:
        '',
      name: 'Harry Potter y El Misterio del Príncipe',
      description:
        'Descripcion',
      unitAvailable: '10',
      price: '20.00',
      category: 'Aventura, Magia, Misterio'
    },
    {
      image:
        '',
      name: 'Harry Potter y Las Reliquias de La Muerte',
      description:
        'Descripcion',
      unitAvailable: '4',
      price: '20.00',
      category: 'Aventura, Magia, Misterio'
    },
    {
      image:
        '',
      name: 'Harry Potter y El Legado Maldito',
      description:
        'Descripcion',
      unitAvailable: '50',
      price: '20.00',
      category: 'Aventura, Magia, Misterio'
    },
  ];

}
2
  • 1
    Muchas gracias!! Se ve que al hacerlo se me fue la cabeza jajajaj Commented el 8 dic. 2023 a las 10:09
  • un gusto colaborar, siempre revisa la documentación de cualquier tecnología que estés aprendiendo, te mantiene la cabeza en su sitio hahaha
    – fredyfx
    Commented el 8 dic. 2023 a las 17:11

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.