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;
}