0

Recientemente empece de practicas dual en una empresa que usan angular para el desarrollo de Web.

Me han mandado una tarea que llevo varios dias intentando resolver, muchos de aquí le resultará alguna tontería pero para mí me está costando la vida.

Consiste en en pintar algo así: introducir la descripción de la imagen aquí

Que va a recibir dos objetos del siguiente tipo:

const ordersTotal ={ amount: 1400000, total: 100 }

const ordersPndingTotals = { amount: 1200000, total: 10 }

y llamaremos al component asi:

<app-orders-totals [orders]="ordersTotal", [pendings]="ordersPndingTotals" ><...>

Por ahora esto es lo que tengo hecho

En el app.component.html introducir la descripción de la imagen aquí

En el app.component.ts introducir la descripción de la imagen aquí

Y en el card-sample.component.ts introducir la descripción de la imagen aquí

Gracias.

2
  • El código debe ir como texto por favor. ;)
    – Israel-ICM
    el 22 abr. 2022 a las 12:43
  • [orders]="ordersTotal", [pendings] esa coma está de más
    – Lobos
    el 22 abr. 2022 a las 13:24

1 respuesta 1

1

No usar fotos para código tenes un buen editor para escribirlo Para la comunicación entre componentes Tenes este buen tutorial comunicación entre componentes La forma en que lo haces es incorrecta ya que el hijo puede recibir valores desde el padre para mostrarlos vía html pero no como lo planteaste el código que definís no es accesible y la coma como te comentaron no se debe especificar El @Input de Angular se pone en el componente hijo para indicar que esas variables proviene desde fuera del componente y para que tenga sentido que sea el hijo quien las represente hay que darle valores en el padre o tambien modificar a esos valores en el hijo de acuerdo a lo que se requiera es una forma que permite la comunicación entre componentes estableciendo la responsabilidad de cada uno de ellos

// componente padre
export class AppComponent {
  
  ordersPendingTotal!: { amount: number; total: number; };
  ordersTotal!: { amount: number; total: number; };
 
  ngOnInit(): void {
    this.ordersTotal ={ amount: 1400000, total: 100 }

    this.ordersPendingTotal = { amount: 1200000, total: 10 }
  }
}
// componente hijo 
export class ChildComponent implements OnInit {
  @Input() orders!: { amount: number; total: number; }
  @Input() pendings!: { amount: number; total: number; };
  
  
  constructor() { }
  }
<!-- vista del padre-->
<h1>Mostrame la vista desde el hijo</h1>
  <app-child [orders]="ordersTotal" [pendings]="ordersPendingTotal"></app-child
  <!--orders y pendings es lo que mostrara el hijo
  recibe desde el padre ordersTotal y ordersPendingTotal
  -->
  <!-- vista desde el hijo-->
  
  <h1>Orders</h1>

<h2>Total:{{orders.amount}}</h2>
<h4>{{orders.total}}</h4>
<h2>Pending:{{pendings.amount}}</h2>
<h4>{{pendings.total}}</h4>

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.