2

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

}
9
  • this.dtTrigger.unsubscribe(); no lo requeris?
    – nestdan
    Commented el 21 mar. 2022 a las 16:16
  • Para actualizar los cambios hay que hacer un re-render de la tabla youtu.be/aMPIznMRaLs
    – nestdan
    Commented el 22 mar. 2022 a las 15:19
  • Ya lo intente pero me sigue sin servir Commented el 22 mar. 2022 a las 17:08
  • podrías mostrar el código del servicio
    – nestdan
    Commented el 23 mar. 2022 a las 16:17
  • Hola, ya pude solucionar mi problema con algo muy sencillo, en un rato publico lo que hice como respuesta, de hecho es con lo que me pasaste de rerender pero con una pequeña modificación Commented el 23 mar. 2022 a las 16:58

1 respuesta 1

1

Ya pude solucionar mi problema el problema era que no actualizaba la tabla de forma correcta: utilicé la directiva DataTableDirective para aplicar destroy a la misma tabla y ademas use tambien ChangeDetectorRef para que detecte cuando halla cambios en la tabla, esto lo hice en mi funcion rerender() ademas de volver a cargar los datos para la tabla despues de usar el dtInstance.destroy() y por ultimo use el ngOnDestroy para usar el dtTrigger.unsubscribe().

Estos son los cambios que aplique a mi TS:

export class CatAferlocalizacionComponent implements OnInit, OnDestroy {

  constructor(private localizacionService: LocalizacionService, private router: Router, 
    private loginService: LoginService, private formBuilder: FormBuilder, private change: ChangeDetectorRef) { }
  localizaciones: localizacionDTO[];
  localizacionesOriginal: localizacionDTO[];
  formSearch: FormGroup;
  formAgregar: FormGroup;
  formEditar: FormGroup;
  qrid: any;

  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject<any>();
  @ViewChild(DataTableDirective, {static: false}) dtElement: DataTableDirective;
  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.loginService.redirectionForAccess(true);
    this.loginService.redirectionForAlmacen();
    this.formSearch = this.formBuilder.group({
      name: ''
    });
    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.setData();
    this.formSearch.valueChanges.subscribe(valores => {
      this.localizaciones = this.localizacionesOriginal;
      this.buscar(valores);
    });
  }
  setData(){
    this.localizacionService.getLocalizacionAfer().subscribe(resp => {
      this.localizaciones = resp;
      this.localizacionesOriginal = resp;
      this.change.detectChanges();
      this.dtTrigger.next(0);
    });
  }
  buscar(valores: any){
    this.localizaciones = this.localizaciones.filter(x => x.nombre.toUpperCase().indexOf(valores.name.toUpperCase()) !== -1);
  }
  setFormEdit(id: number){
    this.localizacionService.getLocalizacionByIdAfer(id).subscribe(resp =>{
      this.formEditar.patchValue(resp);
    });
  }
  crearNuevaLocalizacion(){
    this.formAgregar.controls["id_usuario"].setValue(this.loginService.getLocalUser);
    this.localizacionService.postLocalizacionAfer(this.formAgregar.value).subscribe(() => {
      document.getElementById('exampleModal').click();
      this.alertMessage("Se ha agregado con exito el registro", "alertSuccess");
      this.rerender();
      this.setData();
      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.rerender();
      this.setData();
    }, ()=>{
      this.alertMessage("Se ha producido un error, verifique los datos o contacte al administrador", "alertError");
    });
  }
  rerender(){
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.destroy();
    })
  }
  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);
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }

}

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.