Problem with Primeng multiselect not displaying selected values

Question

Problem with Primeng multiselect not displaying selected values

I am currently facing an issue with populating options on a p-multiSelect element.

The HTML code in question is:

<p-multiSelect
  name="ambits"
  [options]="scopes$ | async">
</p-multiSelect>

The variable scopes$ is defined as follows:

public scopes$: Observable<Array<ApplicationScope>>;
constructor(
    private service: AplicacionsSubcomponentService
) {
    this.scopes$ = service.getScopes()
        .pipe((take(1)));
}

However, despite setting up the

Observable<Array<ApplicationScope>>

subscription using async, my multiselect options remain empty.

Any suggestions on how to resolve this issue?

angular typescript primeng

Answer 1

Answer №1

It seems like the issue lies in how you are calling your services. The AplicacionsSubcomponentService (which may have typos and should likely be corrected to ApplicationsSubcomponentService) is actually a part of your component and should be referenced using this. Try modifying it as follows:

public scopes$: Observable<Array<ApplicationScope>>;

constructor(private readonly service: AplicacionsSubcomponentService) {
    this.scopes$ = this.service.getScopes().pipe(take(1));
}

Additionally, if you want to use custom labels (PrimeNG typically looks for a property named label), you need to specify its name in the template:

<p-multiSelect name="ambits" [options]="scopes$ | async" optionLabel="name">
</p-multiSelect>

For a demonstration, refer to this working Stackblitz example. Note that a mock service was utilized in this example.

Answer 2

It seems like the issue lies in how you are calling your services. The AplicacionsSubcomponentService (which may have typos and should likely be corrected to ApplicationsSubcomponentService) is actually a part of your component and should be referenced using this. Try modifying it as follows:

public scopes$: Observable<Array<ApplicationScope>>;

constructor(private readonly service: AplicacionsSubcomponentService) {
    this.scopes$ = this.service.getScopes().pipe(take(1));
}

Additionally, if you want to use custom labels (PrimeNG typically looks for a property named label), you need to specify its name in the template:

<p-multiSelect name="ambits" [options]="scopes$ | async" optionLabel="name">
</p-multiSelect>

For a demonstration, refer to this working Stackblitz example. Note that a mock service was utilized in this example.

Problem with Primeng multiselect not displaying selected values

Answer №1

Similar questions

Creating a stepper module in Angular 6

Transferring information between components is made easy with ng-content

Error in Angular not providing code line numbers for debugging

Angular 7 ERROR: The SystemJS reference is missing

Error: invalid syntax found in the expression "path". This issue is specific to Angular 4

Tips for updating the display after making an angular $http request using rxjs Observables

Capturing a webpage through Record RTC integration with Angular

Arranging Objects in Angular 2 using Pipes

Can the TypeScript version be extracted from a TS file in a remote environment?

Creating a Docker Image for Node.Js Using Bazel

Tips for utilizing ng-template in various components

Innovative coding solution to modify designated variables in Angular 2 and beyond

Error: The page you are trying to access does not have a valid default export. The provided type is not acceptable

The Ins and Outs of Selecting the Correct Module to Attach a Controller in NestJS CLI

Issue: unable to establish a connection to server at localhost port 5000 while using Next.js getServerSideProps function

Tips for capturing the observable of an initialized mat table paginator

What specific type should be used for validations when incorporating express-validator imperative validations?

Creating a JSON array or JSON object from an Angular Material table

I encountered difficulty in testing the Angular Material Select Component due to complications with the CDK Test Harness

Angular 2 destroy outlet-content and refresh the view