4

Antiguamente Tenía esta funcionalidad:

<div class="row">
   <label class="control-label col-md-3">Aplicación:</label>
     <div class="col-md-9" class="visorg500-select-filter">            
      <select [(ngModel)]="varApps">
        <option  *ngFor="let valorApp of listApps" [value]="valorApp.id">
         {{valorApp.label}}
        </option>
      </select>
     </div>
   </div>

del lado de typeScript:

private LoadApps(): void {
 this.listApps = [
   { id: 1, label: 'PREMIER' },
   { id: 2, label: 'G500 FLEET' }
 ];
 this.varApps = this.listApps[0].id;
}

lo cuál me seleccionaba y me permitía cachar en la "varApps" el id cuando se realizaba el cambio.

Por cuestiones de Diseño y de presentación implementé lo siguiente:

<div class="row">
  <label class="control-label col-md-3">Aplicación:</label>
    <div class="col-md-9">
     <p-dropdown class="visorg500-select-filter" [options]="listApps" filter="true"
      [style]="{'width':'70%'}">
      <select [(ngModel)]="varApps">
        <option *ngFor="let valorApp of listApps" [value]="valorApp.id">
          {{valorApp.label}}
        </option>
      </select>
    </p-dropdown>
   </div>
 </div>

El punto es que ya no me permite, tomar el id producido por el evento del cambio.

Me supongo que por el uso de (p-dropdown), pero hasta ahora no he podido conseguir lo que busco.

Agradeceré si alguien pueda apoyarme, con alguna orientación, Saludos...

1 respuesta 1

1

No deberías tener un p-dropdown y un select, el componente de primeNG debe reemplazar totalmente tu antiguo select, algo como

<p-dropdown class="visorg500-select-filter" [options]="listApps" filter="true"
  [style]="{'width':'70%'}" [(ngModel)]="varApps">
3
  • Trabajé eso al inicio guiado por la documentación del PrimeNG , pero no me permite obtener el id del Change en el VarApps, puesto que de allí tomo para validar de acuerdo a mi aplicación seleccionada con la *ngIf directiva, para mostrar o no cierta información.
    – Abraham
    Commented el 24 sept. 2019 a las 16:12
  • Me ha sido útil, pero para usar las condiciones de mi comentario anterior debo acceder al id o label, ejemplo: *ngIf="varApps.id_app == 1 || *ngIf="varApps.label== "PREMIER"...... Eso era lo que me estaba faltando, Gracias Pablo.
    – Abraham
    Commented el 24 sept. 2019 a las 17:40
  • 1
    Si te soy sincero, no he dado una respuesta más detallada porque siempre uso formularios reactivos, que simplifica mucho observarlos y detectar acciones sobre ellos y, por tanto, no conozco mucho cómo trabajar con ngmodel Commented el 24 sept. 2019 a las 18:20

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.