Angular2: jak powiązać z wyborem wielu

Question

Jestem w stanie powiązać przy użyciu ngModel dla pojedynczego wyboru, ale chciałbym powiązać tablicę z wieloma wybranymi opcjami. Gdy próbuję to pojawia się błąd

Nie można znaleźć obiektu różnią wspierającą „XXX” w „myModelProperty”

mój kod

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

Answer 1

Można zaimplementować własną jak w moim pnkr. AKTUALIZACJA, ponieważ CHOW chciał mieć przykład bez 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; 
     }) 
    } 
    } 
} 

Answer 2

Innym sposobem wybrał/Wybierz opcję wielokrotnego użyciu czystego javascript w angular2. Oto kod musimy napisać w pliku .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 jest tutaj: -

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

w pliku .TS lub w konstruktorze musimy napisać:

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"); 
    } 

Answer 3

Oto implementacja listy wielokrotnego wyboru, która obsługuje dwukierunkowe wiązanie danych. Używam @ViewChild zamiast 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

Ilekroć nieruchomość selectedValues jest zmieniana przez jakiegoś składnika logiki updateSelectList() musi być również nazywane, jak pokazano w „select 1 i 3” logiki przycisk wywołania zwrotnego.

W celu łatwiejszego ponownego użycia, powinno to zostać ponownie przetworzone na dyrektywę atrybutów. (Każdy chętny?)

Answer 4

Jak już powiedzieli inni, nie jest to jeszcze obsługiwane domyślnie w Angular2. Pomyślałem, aby to opublikować, wydaje się raczej prostsze obejście.Oto HTML próbki:

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

I myClass z setSelected funkcji:

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

każdym razem trzeba odniesienie do wybranych pozycji, można użyć:

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

Answer 5

Zastosowanie ng-select

<ng-select [multiple]="true" [items]="items" (selected)="selected($event)" 
         (removed)="removed($event)" placeholder="Select the technologies" required> 
</ng-select> 

tutaj elementy są tablicę, którą chcesz wyświetlić jako list.remove zdarzenia ognia podczas odznaczyć wybrany element.selected elementem zwolniony po wybraniu coś z macierzy-przedmiotów

Odpowiedź dodana przez Sonali rupela

Answer 6

Dlaczego wszyscy ci komplikować odpowiedzi na proste pytanie.

Jeśli z góry mają opcje, które muszą być wybrane, można to zrobić po prostu w ten sposób:

Ten kod jest dobry:

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']; 

lub jeśli masz ciąg można analizować to

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

Więc wszystko co musisz zrobić, to że [(ngModel)] od wybierz tag, muszą być inicjowane w kątowym części z pewną tablicą wartości, które odpowiadają [wartość] ze znacznika opcji

To automatycznie wybierze jedną lub więcej opcji w zależności od wartości z tablicy.