0

tengo un error raro que me va a costar explicar espero que me entiendan...

Estoy aprendiendo angular y la relacion entre componentes, estoy llamando un arreglo de objetos de otro componente para que me anden las funciones que tengo declaradas mas abajo que son de suma y resta de un input *(Este input lo estoy haciendo componente para poder reutilizarlo, pero no me están andando los parametros que tengo en el componente HTML, por error de que cuando hago el gamers: Gamers; me salta...)*el error: La propiedad "gamers" no tiene inicializador y no está asignada de forma definitiva en el constructor

Probe poniendo ! y editando el ts.json pero me soluciona el error de Gamers: gamers, pero no me soluciona lo de los parametros en HTML.

Mil disculpas mi forma de explicar, me resulta complicadísimo decirlo en palabras.

Estoy guiándome de un video de un profesor de mi facultad que hace exactamente lo mismo pero a el si le funciona.

Les dejo mis codigos:

COMPONENTE DE TS DEL INPUT

import { GamersAboutComponent } from '../gamers-about/gamers-about.component';
import { Gamers } from '../gamers-tandil/gamers';

@Component({
  selector: 'app-input-number',
  templateUrl: './input-number.component.html',
  styleUrls: ['./input-number.component.scss']
})
export class InputNumberComponent implements OnInit {

  constructor() { }
 gamers: Gamers ;
  ngOnInit(): void {
  }
//FUNCION DE TS, QUE AUMENTA LA CANTIDAD
MasCantidad(gamers: Gamers): void {
  if(gamers.Cantidad < gamers.Stock)
  gamers.Cantidad++;
  
  }
  
  MenosCantidad(gamers: Gamers): void {
  if (gamers.Cantidad >0)
    gamers.Cantidad--;
    
    }
    
}

COMPONENTE HTML DEL INPUT: 
``` <div> <td><button class="btn btn-success" (click)="MenosCantidad(gamer)">-</button><input size=40 style="width:30px" type=»number» [(ngModel)]="gamer.Cantidad"><button class="btn btn-success"(click)="MasCantidad(gamer)">+</button></td></div> ```




COMPONENTE DONDE TENGO ALOJADO EL ARREGLO DE OBJETOS Y PRINCIPAL DE LA PAGINA:

import { Component, OnInit } from '@angular/core';
import { Gamers } from './gamers';
@Component({
  selector: 'app-gamers-tandil',
  templateUrl: './gamers-tandil.component.html',
  styleUrls: ['./gamers-tandil.component.scss']
})


export class GamersTandilComponent implements OnInit {



gamers: Gamers [] =  [{  
"Nombre": "Teclado Mecanico",
"Marca": "Logitech",
"Precio": 12000,
"Stock": 5,
"Image": "assets/images/auricularlogitech.jpg",
"Oferta": false,
"Cantidad": 0, 

},

{ 
"Nombre": "Mouse Inalambrico",
"Marca": "Razer",
"Precio": 6500,
"Stock": 12,
"Image": "assets/images/mouserazer.jpg",
"Oferta": true,
"Cantidad": 0,

},

{
"Nombre": "Auricular",
"Marca": "SteelSeries",
"Precio": 18000,
"Stock": 19,
"Image": "assets/images/auricularss.jpg",
"Oferta": false,
"Cantidad": 0,
  },

{
"Nombre": "Auricular",
"Marca": "Razer",
"Precio": 28000,
"Stock": 9,
"Image": "assets/images/auricularrazer.jpg",
"Oferta": false,
"Cantidad": 0,
  },
{

"Nombre": "Auricular",
"Marca": "Logitech",
"Precio": 30000,
"Stock": 3,
"Image": "assets/images/auricularlogitech.jpg",
"Oferta": false,
"Cantidad": 0,
  },

 {
"Nombre": "Teclado",
"Marca": "Razer",
"Precio": 38000,
"Stock": 11,
"Image": "assets/images/tecladorazer.jpg",
"Oferta": true,
"Cantidad": 0,  

},

{
"Nombre": "Mouse",
"Marca": "SteelSeries",
"Precio": 10000,
"Stock": 42,
"Image": "assets/images/mousess.jpg",
"Oferta": false,
"Cantidad": 0, 

},

{
"Nombre": "Mouse",
"Marca": "Genius Pro Gamer",
"Precio": 3000,
"Stock": 1,
"Image": "assets/images/mousegenius.jpg",
"Oferta": false,
"Cantidad": 0,


}

];



  constructor() {}

  ngOnInit(): void {
  }


} 
7
  • Nadie ni idea? :( Commented el 24 sept. 2022 a las 19:57
  • Hola Jaoco. Es normal que a veces las cosas mas sencillas no salgan, pero vayamos por partes, si puedes compartir tú código en github sería más fácil ayudarte, en el caso InputNumberComponent es el componente hijo? GamersTandilComponent el padre, que con un bucle for itera el componente hijo, el componente hijo debería ser @Input() gamers: Gamers, y en html del padre inyectarlo al hijo, si no puedo ver más código, no tengo clara la idea, espero que te sirva, Commented el 24 sept. 2022 a las 20:24
  • Hola Juan Carlos!! Gracias por contestar, te dejo el link del github para que te sea mas sencillo ver el problema!! Commented el 24 sept. 2022 a las 23:23
  • Perdona no veo el link? Commented el 25 sept. 2022 a las 0:08
  • github.com/JoaquinPavon/angulartpe ahí esta, perdón jajaja Commented el 25 sept. 2022 a las 4:43

1 respuesta 1

0

He conseguido resolver lo que te ocurría, voy a explicarlo lo mejor que pueda, si quieres compartir el correo mañana te lo envío por zip te dejo mi correo [email protected]. Empecemos por el componente InputNumberComponent

@Input() gamer: Gamers = {
    Image: '',
    Nombre: '',
    Marca: '',
    Precio: 0,
    Stock: 0,
    Oferta: false,
    Cantidad: 0,
  };

  constructor() { }

Con el @Input conseguimos que el componente hijo pueda recibir los datos del componente padre. Ahora con el padre, solo la parte gamers-tandil.component.html

<tr *ngFor="let gamer of gamers" [ngClass]="{'Oferta':gamer.Oferta}">
            <td><img [src]="gamer.Image" [alt]="gamer.Nombre" width="100" height="100"></td>
            <td>{{gamer.Nombre  | uppercase}}</td>
            <td>{{gamer.Marca}}</td>
            <td>{{gamer.Precio  | currency }}</td>
            <td>{{gamer.Stock}}</td>
           <app-input-number [gamer]="gamer"></app-input-number>
        </tr>

Con esto tiene que funcionar, si no es así envíame un email y te lo envío. Un saludo.

1
  • Hola Juan, gracias por responder! Me podrías enviar el zip por favor? Gracias [email protected] Commented el 4 oct. 2022 a las 22:38

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.