Angular Dropdown Not Displaying Text

Question

I'm trying to display an array of KeyValue items in a p-dropdown angular component. It's picking up the correct amount of data (5) but it's not displaying any text in the dropdown ?

key-value.ts

export interface KeyValue {
    label: string;
    value: string;
}

dd.json

{ 
  "Domains": [
    {"label": "North America (NAM)", "value": "NAM"}, 
    {"label": "Europe (EUR)", "value": "EUR"}, 
    {"label": "Australia (AUS)", "value": "AUS"}, 
    {"label": "Latin America (LAAM)", "vaule": "LAAM"}, 
    {"label": "Asia (APA)", "value": "APA"}
  ]
}

component.html

<div class="container">
  <div>Domain:<span class="required">*</span></div>
  <p-dropdown [options]="domains" formControlName="domain" optionLabel="text" (onChange)="dataChanged($event, 'domain')" placeholder="Select an option"></p-dropdown>
  <br>
</div>

component.ts

import { KeyValue } from '../../model/key-value';

export class RequestComponent implements OnInit {
  domains:  KeyValue[] = [];

  constructor(private service: Service) {}

  ngOnInit() {
    this.getPageData();
  }

  getPageData() {
    console.log("getPageData() First: " + this.domains);
    this.service.getDomains().subscribe(domains => {console.log("getPageData() Second: " + domains); this.domains = domains});
    console.log("getPageData() Third: " + this.domains);
  }
}

service.ts

@Injectable()
export class Service{

  constructor(private http: HttpClient) { }

  getDomains(): Observable<any> {
    return this.getJSON()
      .pipe(
        map(
          data => { data.Domains;
                    console.log("getDomains(): " + data.Domains); } ));}

  getJSON(): Observable<any> {
    return this.http.get("assets/dd.json");
  }
}

Console Messages

getPageData() First: 
getPageData() Third: 
getDomains(): [object Object],[object Object],[object Object],[object Object],[object Object]
getPageData() Second: undefined

EDIT

I've made an update to the getDomains() method and added an extra return:

getDomains(): Observable<any> {
  return this.getUNPProperties().pipe(map(data => { console.log("getDomains(): " + data.Domains); return data.Domains}));
}

The console messages are as follows:

getPageData() First: 
getPageData() Third: 
getDomains(): [object Object],[object Object],[object Object],[object Object],[object Object]
getPageData() Second: [object Object],[object Object],[object Object],[object Object],[object Object]

It looks like nothing is being returned from getDomains() method.. but this was suggested by someone else as a working solution ? — Alan Kavanagh
– Alan Kavanagh, Commented Dec 26, 2018 at 18:53
See edits @xyz -- I thought the first return would have returned it ? — Alan Kavanagh
– Alan Kavanagh, Commented Dec 26, 2018 at 18:56

RANJIT PATRA · Accepted Answer · 2018-12-26 19:07:15Z

2

Please set the optionLabel property to 'label'. By default PrimeNg dropdown will take label as display-field and value for value-field. by changing the optionLabel to 'text' will look for a field with name text and which is not available in the domains list.

So the Updated code for p-dropdown is below.

<p-dropdown 
   [options]="domains" 
   formControlName="domain" 
   optionLabel="label" 
   (onChange)="dataChanged($event, 'domain')" 
   placeholder="Select an option">
</p-dropdown>

answered Dec 26, 2018 at 19:07

RANJIT PATRA

8645 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alan Kavanagh Over a year ago

You absolute HEROOOOOOOOOOOOOOOO! I've been looking at this for hours (it's copy pasta from another project).. THANK YOU

Collectives™ on Stack Overflow

Angular Dropdown Not Displaying Text

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related