Я могу связать с помощью ngModel для одного выбора, но я хотел бы привязать массив к нескольким выбранным параметрам. Когда я пытаюсь это сделать, я получаю сообщение об ошибке
Невозможно найти отличающийся поддерживающий объект 'xxx' в 'myModelProperty'
Мой код
<select multiple [(ngModel)]="myModelProperty">
<option *ngFor="#item of myOptions" [value]="item.value">{{item.name}}</option>
</select>
Здесь реализована реализация нескольких списков, поддерживающая двухстороннюю привязку данных. Я использую @ViewChild вместо 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();
}
}
Всякий раз, когда свойство selectedValues изменяется некоторой логикой компонента, также нужно вызвать updateSelectList(), как показано в логике обратного вызова кнопки выбора "1" и "3".
Для более простого повторного использования это, вероятно, должно быть реорганизовано в директиву атрибута. (Любые берущие?)
Почему все это затрудняет ответы на простой вопрос.
Если у вас есть параметры, которые нужно выбрать, вы можете сделать это следующим образом:
Этот код хорошо:
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'];
или если у вас строка, вы можете проанализировать ее
myModelProperty: any;
myModelProperty = string.split(',');
Итак, все, что вам нужно сделать, это то, что [(ngModel)] из тега select, должен быть инициализирован в части angular с некоторым массивом значений, которые соответствуют [value ] из тега параметра
Это автоматически выберет один или несколько параметров, зависящих от значений из массива.
Как говорили другие, он еще не поддерживается по умолчанию в Angular2. Я думал опубликовать это, это выглядит гораздо более простым способом. Вот пример HTML:
<select multiple (change)="setSelected($event.target)">
<option *ngFor="#item of myOptions" [value]="item.value">{{item.name}}</option>
</select>
И myClass с функцией 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; }
}
}
}
...
В любое время, когда вам нужна ссылка на выбранные элементы, вы можете использовать:
var selectedItems = this.myOptions.filter((item) => { return item.selected === true; });
Вы можете реализовать свои собственные, как в моем plnkr. ОБНОВЛЕНО, потому что CHOW хотел получить пример без 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: `
<h3>{{selected|json}}</h3>
<div class="multiple-select col-lg-6 col-md-6 col-sm-6 col-xs-6" style="">
<div class="options col-lg-12 col-md-12 col-xs-12 col-sm-12" *ngFor="#athlete of athletes" id={{athlete.id}} (click)="toggleMultiSelect($event, athlete)">{{athlete.name}}</div>
</div>
`,
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;
})
}
}
}
Другой способ выбрать/выбрать несколько опций, используя чистый javascript в angular2. вот код, который мы должны написать в .html файле:
<div class="multiselect">
<div class="selectBox(click)="showCheckboxes('checkboxes1',batchEvent); batchEvent=!batchEvent">
<select class="form-control">
<option selected disabled>Select Batch</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes1" style="display: none;">
<div *ngFor="#batch of batch_array">
<input type="checkbox" [value]="batch.id" id="E{{batch.id}}" (click)="batchSelectedEevent('E'+batch.id,batch.id)" /> {{batch.batch_name}}
</div>
</div>
</div>
css находится здесь: -
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
}
в файле .ts или в конструкторе мы должны написать:
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 ((<HTMLInputElement>document.getElementById(id)).checked == true) {
this.batchHoliday_array.push(value);
}
else if ((<HTMLInputElement>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");
}
Используйте ng-select
<ng-select [multiple]="true" [items]="items" (selected)="selected($event)"
(removed)="removed($event)" placeholder="Select the technologies" required>
</ng-select>
Здесь элементы - это массив, который вы хотите отобразить как событие list.remove когда вы element.selected выделенный элемент element.selected запускаемое при выборе чего-либо из элементов массива.