¿Por qué todas esas respuestas complicadas sobre preguntas simples?

Si de antemano tiene opciones que deben seleccionarse, puede hacerlo simplemente de esta manera:

Este código es bueno :

HTML

 <select multiple [(ngModel)]="myModelProperty"> <option *ngFor="#item of myOptions" [value]="item.value">{{item.name}}</option> </select>

ANGULAR

 myModelProperty: any; myModelProperty = ['YOUR_VALUE', 'YOUR_VALUE'];

o si tiene una cadena , puede analizarla

 myModelProperty: any; myModelProperty = string.split(',');

Entonces, todo lo que tiene que hacer es que [(ngModel)] de la etiqueta de selección, debe inicializarse en la parte angular con una matriz de valores que corresponden a [valor] de la etiqueta de opción

Esto seleccionará automáticamente una o más opciones dependiendo de los valores de la matriz.

Aquí hay una implementación de lista de selección múltiple que admite el enlace de datos bidireccional. Uso @ViewChild en lugar de getElementById() .

 @Component({ selector: 'my-app', template: `{{title}}<p> <select #select multiple (change)="change($event.target.options)"> <option *ngFor="#item of myOptions" [value]="item.value"> {{item.name}} </option> </select> <br><button (click)="changeOptions()">select 1 and 3</button> <p>{{selectedValues | json}}` }) export class AppComponent { @ViewChild('select') selectElRef; title = "Angular 2 beta - multi select list"; myOptions = [ {value: 1, name: "one"}, {value: 2, name: "two"}, {value: 3, name: "three"}]; selectedValues = ['1','2']; myModelProperty = this.myOptions[0]; constructor() { console.clear(); } ngAfterViewInit() { this.updateSelectList(); } updateSelectList() { let options = this.selectElRef.nativeElement.options; for(let i=0; i < options.length; i++) { options[i].selected = this.selectedValues.indexOf(options[i].value) > -1; } } change(options) { this.selectedValues = Array.apply(null,options) // convert to real Array .filter(option => option.selected) .map(option => option.value) } changeOptions() { this.selectedValues = ['1','3']; this.updateSelectList(); } }

Plunker

Cada vez que alguna lógica de componente cambia la propiedad de valores selectedValues , también se debe llamar a updateSelectList() , como se muestra en la lógica de devolución de llamada del botón "seleccionar 1 y 3".

Para una reutilización más fácil, esto probablemente debería refactorizarse en una directiva de atributo. (¿Ningún arrendatario?)

Como han dicho otros, todavía no es compatible de forma predeterminada en Angular2. Pensé en publicar esto, parece una solución mucho más simple. Aquí hay un HTML de muestra:

 <select multiple (change)="setSelected($event.target)"> <option *ngFor="#item of myOptions" [value]="item.value">{{item.name}}</option> </select>

Y myClass con una función setSelected :

 ... export class myClass { ... myOptions: []; ... setSelected(selectElement) { for (var i = 0; i < selectElement.options.length; i++) { var optionElement = selectElement.options[i]; var optionModel = this.myOptions[i]; if (optionElement.selected == true) { optionModel.selected = true; } else { optionModel.selected = false; } } } } ...

Cada vez que necesite una referencia a elementos seleccionados, puede utilizar:

 var selectedItems = this.myOptions.filter((item) => { return item.selected === true; });