Multiselect in PrimeNG multi select showing empty values

user_10949999 0
Viewed 1113

I have a multiselect component:

<p-multiSelect class="multiple-select" display="chip" [options]="allTags" name="selectedTags" [(ngModel)]="selectedTags" optionLabel="tag" optionValue="tag"></p-multiSelect>

A single tag in the allTags array:

{ tag: 'someTag' }

And the selectedTags array contains strings. when adding tags, it works perfectly. The issue arises when I want to preselect some tags.

  preselectTags(tags: string[]) {
    tags.map(x => this.selectedTags.push(x));

  }

Ive tried forEach, and plain re assigning instead of array.map but every time I see something like this:

enter image description here

Console.logging the selectedTags after filling it returns an array of correct strings. what am i doing wrong?

PS. thanks for advance.

primeng angular typescript multi-select
2 Answers

If I'm not wrong, I suppose that selectedTags array should have the same structure as allTags so, when you make a push you have to build that structure.

preselectTags(tags: string[]) {
   tags.map(x => this.selectedTags.push({val:x}));
}

Hope you helpfully, if don't, please give the prints of each array structure. Regards

user_123233420

You would need to do a find of the options in order to filter out unwanted items/selecting the tags..

So depending on what the tags array is, you could loop over them, or try:

preselectTags(tags: string[]) {

  this.selectedTags = tags.map(x => this.allTags.find(y => y.val === x.val));
}

It would be easier to help with the structure of said arrays....

user_109824620
Related