Angular2 multiple Select element needs to have a few selected

Question

Use Case: I have a multiple Select element with 6 colors. I need 2 of those colors selected. Thanks much. Below is my code, but something is not right?

If there is a better way of doing this, please share?

//view
<select name="wrColors" #wrColors [(ngModel)]="selectedColors" multiple >
  <option *ngFor="let color of allColors" [ngValue]="color">{{color.label}</option>
</select>

//component
allColors = [{
  id: 1,
  label: 'red',
}, {
  id: 2,
  label: 'blue',
}, {
  id: 3,
  label: 'green',
}, {
  id: 4,
  label: 'yellow',
}, {
  id: 5,
  label: 'orange',
}, {
  id: 6,
  label: 'purple',
}];

selectedColors = [{
  id: 2,
  label: 'blue',
}, {
  id: 4,
  label: 'yellow',
}];

@ViewChild('wrColors') selectColorRef: ElementRef;

ngAfterViewInit(): void {
  this.updateSelectList();
}

updateSelectList() {
    let options = this.selectColorRef.nativeElement.options;

    for (let i = 0; i < this.allColors.length; i++) {

        for (let n = 0; n < this.selectedColors.length; n++) {
            if (this.selectedColors[n].Id === this.allColors[i].Id) {

                options[i].selected = true;

            }
        }

        //options[i].selected = this.selectedColors.indexOf(options[i].value) > -1;
    }
}

You could specify what problem you are facing with that code and what you have tried to solve it. — Ján Halaša, Apr 07 '17 at 15:04

score 0 · Answer 1 · edited Apr 07 '17 at 16:10

0

this.preselectedIds = this.selectedArr.map(obj =>{
  return obj.id;
});
//mark
this.preselectedIds = this.selectedArr.map(function (a:any) { return a.Id; });


In option tag inside ngFor,

[attr.selected]="preselectedIds.indexOf(color.id)!=-1 ? true: false"

edited Apr 07 '17 at 16:10

Mark

2,543
6
33
44

answered Apr 07 '17 at 15:07

RemyaJ

5,358
4
22
41

that did not select anything? they all return false – Mark Apr 07 '17 at 15:23
The preselectedArray should have the ids of the colors that were selected by user. Inside ngfor we are checking if the id of the item is present in array and setting option selected to true and false respectively – RemyaJ Apr 07 '17 at 15:25
I understand what it's trying to do, it just doesn't work? Notice that [ngValue]="color" and not [ngValue]="color.id" - but that doesn't work either. – Mark Apr 07 '17 at 15:27
Setting ngValue to color is correct, because you would want the entire object to send to backend or so, but I dont understand why everything is false for selected option. Is the preselected array correct? – RemyaJ Apr 07 '17 at 15:35
I added this.preselected = ["1","2"] to ngOnInit() – Mark Apr 07 '17 at 15:43
I have edited my ans. Check if it works I created a new arr of ids because your selected array was an arr of objects. – RemyaJ Apr 07 '17 at 15:49
the good news is the selected attr is equal to true - so that worked, but visually it doesn't look selected? – Mark Apr 07 '17 at 16:01
I did not get you. Is it that your ngmodel of select does not have both the values? – RemyaJ Apr 07 '17 at 16:12
When you view HTML it shows selected="true" on the correct options. But visually they don't look selected. Which doesn't help the end user. – Mark Apr 07 '17 at 16:17
Try http://stackoverflow.com/questions/9309844/can-i-colour-backgrounds-of-selected-items-in-html-select-options-with-css-only – RemyaJ Apr 07 '17 at 16:28
perhaps it's a bug with angular2? The CSS works fine - once I click them. But it won't show any thing selected without the click... maybe cause it says, ng-pristine??? – Mark Apr 07 '17 at 16:39

Angular2 multiple Select element needs to have a few selected

1 Answers1