Búsqueda de sitios web

angular - p-dropdown no muestra la etiqueta correcta cuando la variable ngModel es un objeto

Estoy usando el componente p-dropdown de PrimeNG. Cuando la página se carga inicialmente, estoy configurando el ng-model, pero el desplegable siempre muestra el primer elemento como el elemento seleccionado.

HTML

<p-dropdown [options]="cities" [(ngModel)]="selectedCity"  optionLabel="name" [showClear]="true"></p-dropdown>
<p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>

TS

this.cities = [
            {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
            {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
            {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
            {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}},
            {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
        ];

Aquí New York se muestra como la opción seleccionada en el desplegable incluso si cambio el ng-model a otra ciudad.

Respuesta #1

Creo que tu problema está en optionLabel="name" porque tu objeto ciudad no contiene una clave name.

O bien lo reemplazas con optionLabel="label" o cambias tu objeto de ciudad de

{label:'New York', value:{id:1, name: 'New York', code: 'NY'}}

a

{name:'New York', value:{id:1, name: 'New York', code: 'NY'}}

Ver StackBlitz

Respuesta #2

Usé un servicio para inyectar las opciones desde mi backend (Versión que falla):

<p-dropdown
  class="mt-2"
  [options]="this.groupOptions"
  [(ngModel)]="this.selectedOption"
  [loading]="isLoading"
  placeholder="Choose a usergroup to activate" />

El groupOptions se inicializó en el constructor:

constructor(private _backendService: SomeControllerService) {
    this._backendService.getAllUserGroups().subscribe(groups => {
      this.groupOptions = [];
      groups.forEach(g =>
        this.groupOptions!.push({
          label: g.name??"Error",
          value: g.id??-1
        }));
    });
}

El problema es que los datos se cargan demasiado tarde y primeng no puede construir el desplegable correctamente. Entonces encontré esta simple directiva en la API de primeNg que resolvió mi problema como por arte de magia (carga).

Versión Fija:

 <p-dropdown
  class="mt-2"
  [options]="this.groupOptions"
  [(ngModel)]="this.selectedOption"
  [loading]="isLoading"
  placeholder="Choose a usergroup to activate" />

Solo se necesita actualizar la variable:

isLoading: boolean = true;    
constructor(private _backendService: SomeControllerService) {
    this._backendService.getAllUserGroups().subscribe(groups => {
      this.groupOptions = [];
      groups.forEach(g =>
        this.groupOptions!.push({
          label: g.name??"Error",
          value: g.id??-1
        }));
    isLoading: boolean = false;
    });
}

Artículos relacionados