0

Queridos compañeros os agradecería muchísimo vuestro ayuda, estoy creando una app de nutrición. Le he instalado el módulo de drag and drop (https://material.angular.io/cdk/drag-drop/overview) para poder desplazar los alimentos en diferentes ingestas (desayuno, comida, cena) el problema es que cuando desplazo los alimentos pierdo el índice de la matriz original, y los cálculos son erróneos ( y no puedo eliminarlos al perder el índice...). He subido mi código en este editor en línea: https://stackblitz.com/edit/angular-drag-drop-material-pl94jv. ¿Os ocurre cómo poder desplazar los alimentos sin perder el índice y los cálculos?

introducir la descripción de la imagen aquí

1 respuesta 1

0

Creo que el problema se debe a utilizar el indice del arreglo de los alimentos que se van almacenando, al cambiar, el peso siempre iba a cambiar, espero que esto ayude.

Elimine el arreglo general de alimentos y utilicé los arreglos de cada tiempo de comida para ajustar los pesos.

import {
  Component
} from '@angular/core';
import {
  CdkDragDrop,
  moveItemInArray,
  transferArrayItem
} from '@angular/cdk/drag-drop';


export interface Alimento {
  nombre: string;
  tipo: string;
  peso_Int: number;
  prot: number;
  lip: number;
  hc: number;
  link_imagen: string;
  n_int_tarjeta: number;
  pesoAlimento: number;
}


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  desayuno: Alimento[]
  comida: Alimento[]
  cena: Alimento[]

  datebasesAlimentos: {
    id: number;
    nombre: string;
    tipo: string;
    peso_Int: number;
    prot: number;
    lip: number;
    hc: number;
    n_int_tarjeta: number;
    link_imagen: string;
  }[] = [

    {
      id: 5,
      nombre: "arroz",
      tipo: "farinaceos",
      peso_Int: 20,
      prot: 1.4,
      lip: 0.2,
      hc: 15.2,
      n_int_tarjeta: 0,
      link_imagen: "https://drive.google.com/uc?export=download&id=1QhuwtYlpqG6BoNfY5U88KtxbN1EaLAes",
    },
    {
      id: 6,
      nombre: "patatas",
      tipo: "farinaceos",
      peso_Int: 100,
      prot: 2.2,
      lip: 0.2,
      hc: 15.2,
      n_int_tarjeta: 0,
      link_imagen: "https://drive.google.com/uc?export=download&id=1g_WD0OcH4YHKdSKkuUYNqk4H65A1TDv5",
    },
    {
      id: 7,
      nombre: "lentejas",
      tipo: "farinaceos",
      peso_Int: 30,
      prot: 7.3,
      lip: 0.4,
      hc: 14.6,
      n_int_tarjeta: 0,
      link_imagen: "https://drive.google.com/uc?export=download&id=1FYjZKs5EAl50NqXN25iOaCLHx-8okOTn",
    },

  ];

  nuevoAlimento: string = "";

  inputProt: number = 30;
  inputLip: number = 20;
  inputCarb: number = 75;

  //  FUNCIONES:

  constructor() {
    this.desayuno = []
    this.comida = []
    this.cena = []
  }

  ngOnInit(): void {}

  calcularPeso(alimento, arrAlimentos) {
    return Math.round((alimento.peso_Int * 5) / arrAlimentos.length)
  }

  ajustarPeso(tiempoDeComida) {
    const todosLosAlimentos = [
      ...this.desayuno,
      ...this.comida,
      ...this.cena
    ]
    return tiempoDeComida.map(alimento => {
      alimento.pesoAlimento = this.calcularPeso(alimento, todosLosAlimentos)
      return alimento
    })
  }

  ajustarTodosLosPesos() {
    this.desayuno = this.ajustarPeso(this.desayuno)
    this.comida = this.ajustarPeso(this.comida)
    this.cena = this.ajustarPeso(this.cena)
  }

  agregarAlimento(): any {
    let index = this.datebasesAlimentos.findIndex(
      (item) => item.nombre == this.nuevoAlimento
    );

    this.desayuno.unshift({
      nombre: this.nuevoAlimento,
      tipo: this.datebasesAlimentos[index].tipo,
      peso_Int: this.datebasesAlimentos[index].peso_Int,
      prot: this.datebasesAlimentos[index].prot,
      lip: this.datebasesAlimentos[index].lip,
      hc: this.datebasesAlimentos[index].hc,
      link_imagen: this.datebasesAlimentos[index].link_imagen,
      n_int_tarjeta: this.datebasesAlimentos[index].n_int_tarjeta,
      pesoAlimento: 0,
    });

    this.ajustarTodosLosPesos()
    this.nuevoAlimento = "";
  }

  drop(event: CdkDragDrop < string[] > ) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }

    this.desayuno = this.ajustarPeso(this.desayuno)
    this.comida = this.ajustarPeso(this.comida)
    this.cena = this.ajustarPeso(this.cena)
  }

  eliminar(tiempoDeComida, i) {
    tiempoDeComida.splice(i, 1);
    this.ajustarTodosLosPesos()
  }

  borrarTodo() {
    this.desayuno = [];
    this.comida = [];
    this.cena = [];
  }
}

5
  • Ante todo gracias por tu tiempo, mi solución funciona bien siempre que todos los alimentos no se muevan de la lista desayuno a otra lista como la comida o la cena. He probado tu solución pero no funcionaría correctamente el cáculo del peso de alimento (en tu caso siempre da el mismo peso da igual cuantos alimentos haya...) y tampoco podría eliminar un elemento selectivamente.
    – JGPcode
    el 2 jul. 2020 a las 17:34
  • Disculpa había entendido mal la lógica, actualizo mi respuesta.
    – Brolag
    el 3 jul. 2020 a las 14:24
  • Disculpa yo no explique bien la lógica en el anunciado, creo que ya casi esta...necesitaría que el cálculo fuese global es decir, si yo pongo 3 unidades de arroz en el desayuno el cálculo saldría 33g por ración pero si por ejemplo pongo 1 unidad en cada ingesta necesitaría que diese el mismo cálculo, o sí pongo 2 raciones en la comida y 1 en la cena...la función eliminar da error. Gracias de nuevo por tu tiempo, un cordial saludo.
    – JGPcode
    el 3 jul. 2020 a las 17:17
  • Claro entiendo, realice un ajuste específicamente para eso, es necesario tomar en cuenta todos los pesos ya introducidos por lo tanto hice un arreglo auxiliar construido a partir de todos los tiempos de comida.
    – Brolag
    el 3 jul. 2020 a las 22:51
  • Excelente aporte compañero, funciona correctamente, voy a estudiar bien la lógica que has propuesto. La función eliminar también funciona correctamente (olvidé modificar el HTML para llamar a la nueva función). Un cordial saludo, José.
    – JGPcode
    el 4 jul. 2020 a las 6:50

Tu Respuesta

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

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