return a function result into dropdown options

Question

I want to return the result of a function in my component into a dropdown options:

this is my template:

<th>
  <p-dropdown
   [options]="getNames()"
   [required]="true"
   optionLabel="label"
   (onChange)="filterName($event.target.value)"
 >
</p-dropdown>

this is my function

    public getNames() {
    let namesLabels: any[];
    this.backendService.getNames().subscribe(response => {
    this.namesSelect = response.filter(item => item.name !== '');
    this.namesSelect .forEach(prod => namesLabels.push(prod.name));
    });
    return namesLabels;
}

the array namesLabels is well charged, means when I add a console.info for each element of namesLabels I found my wanted result

in the screen I don't found any value in the dropdown, any help please ?

Evgeny Gurevich · Accepted Answer · 2024-02-26 11:21:50Z

0

I guess you need something as below:

// .ts
options: any[];

ngOnInit() {
  this.getNames();
}

private getNames() {      
  this.backendService.getNames().subscribe(response => {
    this.namesSelect = response.filter(item => item.name !== '');
    this.namesSelect.forEach(prod => this.options.push(prod.name));
  });
  
}

//.html
<p-dropdown
   [options]="options"
   [required]="true"
   optionLabel="label"
   (onChange)="filterName($event.target.value)"
 >
</p-dropdown>

edited Feb 26, 2024 at 11:21

answered Feb 26, 2024 at 10:58

Evgeny Gurevich

6574 silver badges7 bronze badges

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

2 Comments

sr123 Over a year ago

thank you Evgency, I have an error TypeError: namesLabels is undefined

Evgeny Gurevich Over a year ago

I have updated my answer, see getNames function definition.

Collectives™ on Stack Overflow

return a function result into dropdown options

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related