0

Descripción del problema: tengo una aplicación en angular la cuan es un panel de usuarios que se registran de un sitio web la función del panel es cambiar los estados de cada usuario según vayan pagando.

la solución que necesito: necesito poder guardar el estado cuando se selecciona uno u otra opción sin importar que se refresque la pagina

comparto todo mi ts:

export class OrdenesComponent implements OnInit {
  ListOfOrders: ordenInterce[];

  OrdenDelete: ordenInterce;

  estados = [
    {
      id: 'paid',
      label: 'Pagado',
    },
    {
      id: 'toPay',
      label: 'Por pagar',
    },
  ];


  ngOnInit(): void {
    this.getListOfOrders();
  }


  recargarDespuesDeSubirArchivo(){
    this.getListOfOrders();
  }
  constructor(
    private modalService: NgbModal,
    private OrdenesService: OrdenesService
  ) {}

  openDetallePoliza(content: any): void {
    this.modalService.open(content, {
      ariaLabelledBy: 'modal-basic-title',
      /*windowClass: 'confirmacionUsuariosModal',*/
    });
  }

  getListOfOrders = async () => {
    try {
      this.ListOfOrders = await this.OrdenesService.adminListOfOrders();
    } catch (error) {
      console.log(error);
    } 
  };

  openModalEliminarOrden = (content, OrdenDelete: ordenInterce) => {
    this.OrdenDelete = OrdenDelete;
    this.modalService.open(content, {
      ariaLabelledBy: 'modal-basic-title',
      /*windowClass: 'confirmacionUsuariosModal',*/
    });
  };

  deleteOrden = () => {
    this.OrdenesService.deleteOrder(this.OrdenDelete.orderId).then(() => {
      this.modalService.dismissAll();
      Swal.fire(
        'Orden Eliminada',
        'La orden fue eliminada correctamente',
        'success'
      );
      this.getListOfOrders();
    });
  };
}

esto esta en el component.html aqui solo coloque la parte de la tabla donde necesito el cambio de los estados que son pagado y por pagar:

         <div class="select-custom-forms">
              <select [(ngModel)]="poliza.status">
                <option *ngFor="let estado of estados" 
                   [value]="estado.id">
                  {{ estado.label }}
                </option>
              </select>
            </div>

adjunto imagen de lo que tengo: introducir la descripción de la imagen aquí

adjunto esta imagen para mas detalle es un panel de administración de usuarios no un registro de usuarios necesito que cuando se cambie el estado se mantenga: introducir la descripción de la imagen aquí

1 respuesta 1

0

El codigo de mi solucion en githubcodigo en github que corresponde a tu pregunta anterior con respecto a un solo select consultabas como lograr que el valor seleccionado se mantenga luego de cambiar de ruta o al refrescar la pagina Ahora modificaste la pregunta y mostras una foto de una tabla sin subir el codigo que usas no es adecuado solo subir imagenes para que te puedan responder ya que si fuera Angular material se podria usar openedChange: EventEmitter

Con el siguiente codigo podes obtener el valor asignarlo guardarlo por ejemplo en localStorage para un select asi mantiene el valor tanto al cambiar de ruta como al refrescar la pagina Los Formularios Reactivos son de mucha utilidad podes leer algo de teoría de ellos y un ejemplo con select no es la opción que usaste ni tampoco la que repondi pero creo es la mejor opción ya que si fuera una tabla de angular material se podria usar por ejemplo openedChange: EventEmitter pero depende todo del codigo que usas teoria formularios reactivos y un ejemplo de uso de select con formularios reactivos ejemplo con select de formularios reactivos como se guarda el localStorage agregue un boton para eliminar el item estado del mismo cuando sea necesario

//ts
 estado!:string;
selectedValue!:string;
ngOnInit() {
this.selectedValue=localStorage.getItem('estado') || 'ESTADO';
 }

onChange(event: Event) {
    let estado = (event.target as HTMLInputElement).value;
    localStorage.setItem('estado', this.estado);
     this.selectedValue=localStorage.getItem('estado') || 'ESTADO';
console.log('this.selectedValue',this.selectedValue,localStorage.getItem('estado'))
   
  }
  
   removeItemStorage(key: string) {
localStorage.removeItem(key);
  }
<div class="select-custom-forms">
    <select (change)="onChange($event)" [(ngModel)]="selectedValue" >
     
      <option *ngFor="let estado of estados" [value]="estado.id">
        {{ estado.label }}
      </option>
    </select>
  </div>
  

<h1> <button type="button" class="btn btn-primary btn-sm" (click)="removeItemStorage('estado')">
  Remove estado  local storage
  </button></h1>
La imagen es solo para que el que consulto vea donde se guardan las variables en LocalStorage el codigo esta completo en la respuesta no es nuevo codigo el de la imagen

La imagen es solo para que el que consulta vea donde ver las variables definidas en el localstorage

11
  • gracias por la respuesta pero sigue sin guardarse, en la consola me arroja que guarda un undefined Commented el 29 dic. 2021 a las 18:19
  • Modificaste tu codigo de acuerdo al codigo que publique porque en el que publicas no podes acceder con el select de la forma en que lo haces probe el codigo que publique y da el resultado requerido pero si no modifixas por ejemplo a <select (change)="onChange($event)" [(ngModel)]="selectedValue" > y otras modificaciones no podras capturar el valor saludos
    – nestdan
    Commented el 29 dic. 2021 a las 19:12
  • en localstorage se guardara la variable de acuerdo a la imagen que agregue
    – nestdan
    Commented el 29 dic. 2021 a las 20:07
  • @nestdan Hola!, las aportaciones con imágenes son poco claras y/o confusas. Para realizar un ejemplo más funcional para todos puedes usar servicios como stackblitz.com.
    – Legna
    Commented el 29 dic. 2021 a las 20:26
  • de esta manera tengo el html: <div class="select-custom-forms"> <select [(ngModel)]="selectedValue" (change)="onChange($event)"> <option *ngFor="let estado of estados" [value]="estado.id"> {{ estado.label }} </option> </select> </div> Commented el 29 dic. 2021 a las 21:35

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.