Angular2: cómo se unen para seleccionar múltiples

Puedo vincular usando ngModel para una única selección, pero me gustaría vincular una matriz a las múltiples opciones seleccionadas. Cuando bash esto obtengo el error

No se puede encontrar un objeto de soporte diferente ‘xxx’ en ‘myModelProperty’

Mi código

  {{item.name}}  

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

 @Component({ selector: 'my-app', template: `{{title}}


{{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

Siempre que la propiedad updateSelectList() sea ​​modificada por alguna lógica de componente, también se debe llamar a updateSelectList() , como se muestra en la lógica de callback de los botones “seleccionar 1 y 3”.

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

Por qué todos estos complican las respuestas sobre una pregunta simple.

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

Este código es bueno :

HTML

  

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, tenga que ser inicializado en la parte angular con una serie de valores que corresponden a [valor] desde la etiqueta de opción

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

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

  

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 usar:

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

Podrías implementar el tuyo como en mi plnkr. ACTUALIZADO porque CHOW quería el ejemplo sin jquery.

http://plnkr.co/edit/Pf92XATg3PT5RtBvrsaA?p=preview

 //our root app component import {Component} from 'angular2/core' @Component({ selector: 'my-app', providers: [], styles:['.options{cursor:pointer;padding:10px;border-bottom:1px solid black;}', '.multiple-select{overflow-y:scroll; height:100px;}'], template: ` 

{{selected|json}}

{{athlete.name}}
`, directives: [] }) export class App { public athletes:any[]=[]; public selected:any[]=[]; constructor() { for(var i = 1; i <= 5; i++){ this.athletes.push({ value:i, name:("athlete-"+i), id:("id-"+i) }) } } toggleMultiSelect(event, val){ event.preventDefault(); if(this.selected.indexOf(val) == -1){ this.selected = [...this.selected, val]; var elem = document.getElementById(val.id); elem.className += " fa fa-check"; }else{ var elem = document.getElementById(val.id); elem.className = elem.className.split(' ').splice(0, elem.className.split(' ').length - 2).join(' '); this.selected = this.selected.filter(function(elem){ return elem != val; }) } } }

http://imgur.com/2P383hS

Otra forma de elegir / Seleccionar múltiples opciones usando javascript puro en angular2. aquí está el código que tenemos que escribir en el archivo .html:

  

css está aquí: –

 .multiselect { width: 200px; } .selectBox { position: relative; } .selectBox select { width: 100%; font-weight: bold; } .overSelect { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } 

en el archivo .ts o en el constructor tenemos que escribir:

 batchEvent:boolean= false; // Function for Multiple Select options checkbox area // showCheckboxes(ids, flag) { let checkboxes = document.getElementById(ids); if (!flag) { checkboxes.style.display = "block"; } else { checkboxes.style.display = "none"; } } batchSelectedholiday(id, value) { // console.log(id, value); if ((document.getElementById(id)).checked == true) { this.batchHoliday_array.push(value); } else if ((document.getElementById(id)).checked == false) { let indexx = this.batchHoliday_array.indexOf(value); this.batchHoliday_array.splice(indexx, 1); } console.log(this.batchHoliday_array, "batchHoliday_array"); } 

Use ng-select

   

aquí los elementos son una matriz que desea mostrar como lista. list.remove evento de disparo cuando deselecciona el elemento seleccionado element.selected elemento seleccionado disparado cuando selecciona algo de la matriz-elementos

Respuesta agregada por Sonali rupela