Skip to main content
se eliminó 1 carácter en el cuerpo
Origen Enlace
GAL
  • 88
  • 1
  • 12

Desde un componente hijo realizo varias acciones sobre una tabla (agregar, editar, duplicar y eliminar). Todo lo que se agrega, edita o elimina, se guarda en un array el cual debe ser enviado al componente padre.

Actualmente, por cada acción que se realiza, hago el emit del array, es decir que tengo 4 funciones (1 para cada acción) y hago el emit en cada una de ellas.

Probé usando un DoCheck con un if sobre el array pero se llama 3 veces cada vez que se inserta, edita o elimina un objeto al array, funcione pero no es óptimo ya que se haría el emit varias veces innecesariamente.

Quisiera saber si esto es correcto o hay alguna manera más efectiva de realizar lo mismo sin necesidad de llamar el emit cada vez que se produce una acción.

Componente hijo:

@Output() oProcedimientos = new EventEmitter<Procedimiento[]>();

addProc() {
   this.arrayProcedimientos.push(procedimiento);
   this.clear();
   this.oProcedimientos.emit(this.arrayProcedimientos);
}


editar(i: number) {
   const p: Procedimiento = this.arrayProcedimientos[i];
   this.procedimientoSeleccionado = p.procedimiento;
   this.ambitoSeleccionado = p.ambito;
   this.formProcedimientos.patchValue({
      descripcion: this.procedimientoSeleccionado.descripcion,
      ambito: this.ambitoSeleccionado,
 });
 this.oProcedimientos.emit(this.arrayProcedimientos);
}

duplicar(i: number) {
   const clonedProc: Procedimiento = Object.create(this.arrayProcedimientos[i]);
   this.arrayProcedimientos.push(clonedProc);
   this.oProcedimientos.emit(this.arrayProcedimientos);
} 

eliminar(i: number) {
   this.arrayProcedimientos.splice(i, 1);
   this.oProcedimientos.emit(this.arrayProcedimientos);
}

Componente padre: HTML:

<app-procedimientos (oProcedimientos)="getProcedimientos($event)"></app-procedimientos>

.ts TS

procReceived: Procedimiento[];

getProcedimientos(procedimiento) {
   this.procReceived = procedimiento;
}

Desde un componente hijo realizo varias acciones sobre una tabla (agregar, editar, duplicar y eliminar). Todo lo que se agrega, edita o elimina, se guarda en un array el cual debe ser enviado al componente padre.

Actualmente, por cada acción que se realiza, hago el emit del array, es decir que tengo 4 funciones (1 para cada acción) y hago el emit en cada una de ellas.

Probé usando un DoCheck con un if sobre el array pero se llama 3 veces cada vez que se inserta, edita o elimina un objeto al array, funcione pero no es óptimo ya que se haría el emit varias veces innecesariamente.

Quisiera saber si esto es correcto o hay alguna manera más efectiva de realizar lo mismo sin necesidad de llamar el emit cada vez que se produce una acción.

Componente hijo:

@Output() oProcedimientos = new EventEmitter<Procedimiento[]>();

addProc() {
   this.arrayProcedimientos.push(procedimiento);
   this.clear();
   this.oProcedimientos.emit(this.arrayProcedimientos);
}


editar(i: number) {
   const p: Procedimiento = this.arrayProcedimientos[i];
   this.procedimientoSeleccionado = p.procedimiento;
   this.ambitoSeleccionado = p.ambito;
   this.formProcedimientos.patchValue({
      descripcion: this.procedimientoSeleccionado.descripcion,
      ambito: this.ambitoSeleccionado,
 });
 this.oProcedimientos.emit(this.arrayProcedimientos);
}

duplicar(i: number) {
   const clonedProc: Procedimiento = Object.create(this.arrayProcedimientos[i]);
   this.arrayProcedimientos.push(clonedProc);
   this.oProcedimientos.emit(this.arrayProcedimientos);
} 

eliminar(i: number) {
   this.arrayProcedimientos.splice(i, 1);
   this.oProcedimientos.emit(this.arrayProcedimientos);
}

Componente padre: HTML:

<app-procedimientos (oProcedimientos)="getProcedimientos($event)"></app-procedimientos>

.ts

procReceived: Procedimiento[];

getProcedimientos(procedimiento) {
   this.procReceived = procedimiento;
}

Desde un componente hijo realizo varias acciones sobre una tabla (agregar, editar, duplicar y eliminar). Todo lo que se agrega, edita o elimina, se guarda en un array el cual debe ser enviado al componente padre.

Actualmente, por cada acción que se realiza, hago el emit del array, es decir que tengo 4 funciones (1 para cada acción) y hago el emit en cada una de ellas.

Probé usando un DoCheck con un if sobre el array pero se llama 3 veces cada vez que se inserta, edita o elimina un objeto al array, funcione pero no es óptimo ya que se haría el emit varias veces innecesariamente.

Quisiera saber si esto es correcto o hay alguna manera más efectiva de realizar lo mismo sin necesidad de llamar el emit cada vez que se produce una acción.

Componente hijo:

@Output() oProcedimientos = new EventEmitter<Procedimiento[]>();

addProc() {
   this.arrayProcedimientos.push(procedimiento);
   this.clear();
   this.oProcedimientos.emit(this.arrayProcedimientos);
}


editar(i: number) {
   const p: Procedimiento = this.arrayProcedimientos[i];
   this.procedimientoSeleccionado = p.procedimiento;
   this.ambitoSeleccionado = p.ambito;
   this.formProcedimientos.patchValue({
      descripcion: this.procedimientoSeleccionado.descripcion,
      ambito: this.ambitoSeleccionado,
 });
 this.oProcedimientos.emit(this.arrayProcedimientos);
}

duplicar(i: number) {
   const clonedProc: Procedimiento = Object.create(this.arrayProcedimientos[i]);
   this.arrayProcedimientos.push(clonedProc);
   this.oProcedimientos.emit(this.arrayProcedimientos);
} 

eliminar(i: number) {
   this.arrayProcedimientos.splice(i, 1);
   this.oProcedimientos.emit(this.arrayProcedimientos);
}

Componente padre: HTML:

<app-procedimientos (oProcedimientos)="getProcedimientos($event)"></app-procedimientos>

TS

procReceived: Procedimiento[];

getProcedimientos(procedimiento) {
   this.procReceived = procedimiento;
}
Origen Enlace
GAL
  • 88
  • 1
  • 12

Angular - Enviar al componente padre Output actualizado

Desde un componente hijo realizo varias acciones sobre una tabla (agregar, editar, duplicar y eliminar). Todo lo que se agrega, edita o elimina, se guarda en un array el cual debe ser enviado al componente padre.

Actualmente, por cada acción que se realiza, hago el emit del array, es decir que tengo 4 funciones (1 para cada acción) y hago el emit en cada una de ellas.

Probé usando un DoCheck con un if sobre el array pero se llama 3 veces cada vez que se inserta, edita o elimina un objeto al array, funcione pero no es óptimo ya que se haría el emit varias veces innecesariamente.

Quisiera saber si esto es correcto o hay alguna manera más efectiva de realizar lo mismo sin necesidad de llamar el emit cada vez que se produce una acción.

Componente hijo:

@Output() oProcedimientos = new EventEmitter<Procedimiento[]>();

addProc() {
   this.arrayProcedimientos.push(procedimiento);
   this.clear();
   this.oProcedimientos.emit(this.arrayProcedimientos);
}


editar(i: number) {
   const p: Procedimiento = this.arrayProcedimientos[i];
   this.procedimientoSeleccionado = p.procedimiento;
   this.ambitoSeleccionado = p.ambito;
   this.formProcedimientos.patchValue({
      descripcion: this.procedimientoSeleccionado.descripcion,
      ambito: this.ambitoSeleccionado,
 });
 this.oProcedimientos.emit(this.arrayProcedimientos);
}

duplicar(i: number) {
   const clonedProc: Procedimiento = Object.create(this.arrayProcedimientos[i]);
   this.arrayProcedimientos.push(clonedProc);
   this.oProcedimientos.emit(this.arrayProcedimientos);
} 

eliminar(i: number) {
   this.arrayProcedimientos.splice(i, 1);
   this.oProcedimientos.emit(this.arrayProcedimientos);
}

Componente padre: HTML:

<app-procedimientos (oProcedimientos)="getProcedimientos($event)"></app-procedimientos>

.ts

procReceived: Procedimiento[];

getProcedimientos(procedimiento) {
   this.procReceived = procedimiento;
}