Estoy trabajando en un sistema con Angular cli en el front end y con MVC con C# en el back end. Este sistema contiene diferentes catálogos donde se pueden agregar y editar los registros y estos se muestran en un datatable, este tiene su dtOption y su dtTrigger para darle las opciones de reenlistar los registros por sus diferentes campos, el problema viene de aquí, tengo las funciones para que al momento de agregar o editar un registro la tabla se actualice y muestre los nuevos datos, y hace todo bien, pero al momento de que ya se actualizó la tabla y le oprimo el botón para reordenar los registros por el campo que elijo, si se reordena, pero la tabla vuelve como si nunca se hubiera actualizado, por ejemplo si en mi tabla de productos tiene dos elementos, a y b, le agrego el elemento c, y reordeno la tabla, la tabla muestra solo los elementos a y b, como si nunca hubiera agregado el elemento c.
Ya intente buscando varios ejemplos en Internet pero los ejemplos que he visto usan otras formas de llenar los datos que no aplican para las tecnologías que estoy usando.
Les dejo los códigos que utilizo:
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-hover table-bordered">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Localización</th>
<th scope="col">Activo</th>
<th scope="col">Etiqueta</th>
<th scope="col">Editar</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let localizacion of localizaciones">
<th scope="col">{{localizacion.id}}</th>
<td>{{localizacion.nombre}}</td>
<td>{{localizacion.activo}}</td>
<td><button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#qrModal"
(click)="getqr(localizacion.id, localizacion.nombre)">Imprimir</button></td>
<td><button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#editModal"
(click)="setFormEdit(localizacion.id)">Editar</button></td>
</tr>
</tbody>
</table>
TS
export class CatAferlocalizacionComponent implements OnInit {
constructor(private localizacionService: LocalizacionService, private router: Router,
private loginService: LoginService, private formBuilder: FormBuilder) { }
localizaciones: localizacionDTO[];
formAgregar: FormGroup;
formEditar: FormGroup;
qrid: any;
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject<any>();
ngOnInit(): void {
if(this.loginService.getLocalToken){
this.loginService.validateToken(this.loginService.getLocalToken).subscribe(resp => {
if(!resp){
this.router.navigate(['/login']);
}
});
}else {
this.router.navigate(['/login']);
}
this.loginService.redirectionForOperators();
this.formAgregar = this.formBuilder.group({
nombre: ['', { validators:[Validators.required]}],
activo: ['', { validators:[Validators.required]}],
id_usuario: this.loginService.getLocalUser
});
this.formEditar = this.formBuilder.group({
id: ['', { validators:[Validators.required]}],
nombre: ['', { validators:[Validators.required]}],
activo: ['', { validators:[Validators.required]}]
});
this.dtOptions = {
pagingType: 'full_numbers',
//pageLength: 10,
info: false,
searching: false,
paging: false,
scrollY: '300px',
order: []
};
this.localizacionService.getLocalizacionAfer().subscribe(resp => {
this.localizaciones = resp;
this.dtTrigger.next(0);
});
}
setFormEdit(id: number){
this.localizacionService.getLocalizacionByIdAfer(id).subscribe(resp =>{
this.formEditar.patchValue(resp);
});
}
crearNuevaLocalizacion(){
this.localizacionService.postLocalizacionAfer(this.formAgregar.value).subscribe(() => {
document.getElementById('exampleModal').click();
this.alertMessage("Se ha agregado con exito el registro", "alertSuccess");
this.recargarTabla();
this.resetform();
}, () => {
this.alertMessage("Se ha producido un error, verifique los datos o contacte al administrador", "alertError");
});
}
editarLocalizacion(){
var id = parseInt(this.formEditar.controls['id'].value);
this.localizacionService.putLocalizacionAfer(id, this.formEditar.value).subscribe(()=>{
document.getElementById('editModal').click();
this.alertMessage("Se ha editado con exito el registro", "alertSuccess");
this.recargarTabla();
}, ()=>{
this.alertMessage("Se ha producido un error, verifique los datos o contacte al administrador", "alertError");
});
}
recargarTabla(){
this.localizacionService.getLocalizacionAfer().subscribe(resp => {
this.localizaciones = resp;
});
}
resetform(){
this.formAgregar.reset();
}
getqr(id: number, nombre: string){
this.qrid = {id: id, nombre: nombre};
}
printer() {
var properties = " <style> @page { " +
" size: 10cm 10cm; " +
" } " +
" </style> ";
const printContent = document.getElementById("print");
const WindowPrt = window.open('', 'Impresion de etiquetas', 'left=250,top=50,width=900,height=900,toolbar=0,scrollbars=0,status=0');
WindowPrt.document.write(printContent.innerHTML);
WindowPrt.document.close();
WindowPrt.focus();
WindowPrt.print();
WindowPrt.close();
}
alertMessage(m: string, id: string){
var alertlml = document.getElementById(id);
alertlml.removeAttribute('hidden');
alertlml.children[1].innerHTML = m;
setTimeout(() => {
document.getElementById(id).hidden = true;
}, 10000);
}
}