0

Following the instructions of https://www.primefaces.org/primeng/#/dropdown i'm trying to do one, but list options are not displayed.

Edit: It's fixed. I inderstood it wrong. I thought that i could get languages from an external class in order to reuse the component. Probably it's possible, but that's something i still don't know how to do. If someone could help me with that, i would really appreciate that.

Those are my classes:

Idioma.ts

export interface Idiomas {
  name: string;
  code: string;
}

export class Idioma{

  languages: Idiomas[];
  selectedLanguage:Idiomas;//Selected language unused

  constructor(){
    this.languages=[
      {name: 'Español', code: 'SPA'},
      {name: 'Deutsch', code: 'GER'},
      {name: 'български език', code: 'BUL'},
      {name: 'Hrvatski', code: 'CRO'},
      {name: 'Dansk', code: 'DEN'},
      {name: 'Dlovenčina', code: 'SLK'},
      {name: 'Slovenščina', code: 'SLN'},
      {name: 'Eesti keel', code: 'STN'},
      {name: 'Suomi', code: 'FIN'},
      {name: 'Français', code: 'FRA'},
      {name: 'Ελληνική γλώσσα', code: 'GRE'},
      {name: 'Nedarlands', code: 'HOL'},
      {name: 'Magyar', code: 'HUN'},
      {name: 'English', code: 'ENG'},
      {name: 'Italiano', code: 'ITA'},
      {name: 'Latviešu valoda', code: 'LET'},
      {name: 'Lietuvių kalba', code: 'LIT'},
      {name: 'Polski', code: 'POL'},
      {name: 'Portugués', code: 'POR'},
      {name: 'Čeština', code: 'CHE'},
      {name: 'Limba română', code: 'RUM'},
      {name: 'Svenska', code: 'SWE'}
    ]
  }
}

header.component.ts

import { Component, OnInit } from '@angular/core';
import {Idioma, Idiomas} from "../../classes/Idioma";//Idioma unused

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  languages:Idioma[];
  selectedLanguage: Idioma;

  constructor() {

  }

  ngOnInit() {

  }

}

header.component.html

<p-dropdown [options]="languages" [(ngModel)]="selectedLanguage" optionLabel="name" placeholder="Idiomas"></p-dropdown>

And that's what i get:

When i click on the dropdown

What am i doing wrong?

To solve it a changed as follows:

app.module.ts

import {FormsModule} from "@angular/forms";

Idiomas.ts

export interface Idiomas {
  label: string;
  code: string;
}

header.component.ts

import { Component, OnInit } from '@angular/core';
import {Idiomas} from "../../classes/Idiomas";

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  languages: Idiomas[];
  selectedLanguage:Idiomas;

  constructor(){
    this.languages=[
      {label: 'Español', code: 'SPA'},
      {label: 'Deutsch', code: 'GER'},
      {label: 'български език', code: 'BUL'},
      {label: 'Hrvatski', code: 'CRO'},
      {label: 'Dansk', code: 'DEN'},
      {label: 'Dlovenčina', code: 'SLK'},
      {label: 'Slovenščina', code: 'SLN'},
      {label: 'Eesti keel', code: 'STN'},
      {label: 'Suomi', code: 'FIN'},
      {label: 'Français', code: 'FRA'},
      {label: 'Ελληνική γλώσσα', code: 'GRE'},
      {label: 'Nedarlands', code: 'HOL'},
      {label: 'Magyar', code: 'HUN'},
      {label: 'English', code: 'ENG'},
      {label: 'Italiano', code: 'ITA'},
      {label: 'Latviešu valoda', code: 'LET'},
      {label: 'Lietuvių kalba', code: 'LIT'},
      {label: 'Polski', code: 'POL'},
      {label: 'Portugués', code: 'POR'},
      {label: 'Čeština', code: 'CHE'},
      {label: 'Limba română', code: 'RUM'},
      {label: 'Svenska', code: 'SWE'}
    ]
  }

  ngOnInit() {

  }

}

1 Answer 1

1

It should work with optionLabel="name". I am using it this way. You don't have any error in console ? Maybe in your real code you are getting your options asynchronuously and you have to wait for it to be ready ?

<p-dropdown *ngIf="!!languages" [options]="languages" [(ngModel)]="selectedLanguage" optionLabel="name" placeholder="Idiomas"></p-dropdown>
Sign up to request clarification or add additional context in comments.

1 Comment

No no, it's fixed but i prefer your solution. Thanks so much!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.