1

Tengo este código en el HTML:

<select [(ngModel)]="seleccion.grupo">
    <option *ngFor="let grupo of grupos" value="{{grupo['id']}}">{{grupo['name']}}</option>
</select> &nbsp;

<button (click)="actualizarUsuarios()" class="boton-aceptar"></button>&nbsp;

<select [(ngModel)]="seleccion.usuario">
    <option *ngFor="let usuario of usuarios" value="{{usuario['id']}}">{{usuario['username']}}</option>
</select>

La idea es que cuando el usuario escoja un grupo, se muestre en el otro select los usuarios que pertenecen a ese grupo. Pero lo hago mediante un botón, y necesito que se actualice la vista de forma automática.

He leído sobre (ngModelChange) y he intentado aplicarlo pero no lo he conseguido tampoco.

El método actualizarUsuarios() simplemente hace una petición GET para traer los usuarios que pertenecen a un grupo, que le paso por parámetro.

1
  • ¿Qué has intentado con (ngModelChange)? Commented el 25 ago. 2020 a las 13:20

3 respuestas 3

1

Yo he usado el select de esta forma para que funcione correctamente con el ngModelChangue.

<select id="grupo" name="grupo" [(ngModel)]="seleccion.grupo" (ngModelChange)="actualizarUsuarios()">
  <option *ngFor="let grupo of grupos" [ngValue]="grupo.id"> {{grupo.name}} </option>
</select>

<select [(ngModel)]="seleccion.usuario">
    <option *ngFor="let usuario of usuarios" value="{{usuario['id']}}">{{usuario['username']}}</option>
</select>

En el option en lugar de manejar un value, seria [ngValue] con el valor de el grupo

0

Si la vista no detecta los cambios en el controlador deberias echarle un vistazo la interfaz OnChanges y SimpleChanges que permite diferenciar los parametros y realizar operaciones sobre dichos cambios.

0

Puedes utilizar la siguiente estructura:

<select [(ngModel)]="seleccion.grupo"   >
    <option *ngFor="let grupo of usuariosPorGrupo | keyvalue">{{grupo.key}}</option>
</select> &nbsp;



<select [(ngModel)]="seleccion.usuario">

    <option *ngIf="!seleccion.grupo" disabled="true">Selecciona un grupo</option>
    <option *ngFor="let usuario of usuariosPorGrupo[seleccion.grupo]" >{{usuario}}</option>
</select>


Y en tu component.ts:

  seleccion = {
    grupo: "",
    usuario: ""
  };

  usuariosPorGrupo = {
    grupo1: ["usuario 1", "Usuario 4"],
    grupo2: ["Usuario 2", "Usuario 3"]
  };

Te dejo un ejemplo funcional aqui

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.