Angular2 多个 Select 元素需要选择几个

Question

用例：我有一个具有 6 种颜色的多个 Select 元素。我需要选择其中两种颜色。非常感谢。下面是我的代码，但有什么不对吗？

如果有更好的方法，请分享？

//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;
    }
}

Answer 1

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"