Angular2:如何绑定选择多个

Question

我能够使用ngModel单个选择绑定,但我想将数组绑定到多个选定的选项.当我尝试这个时,我得到了错误

在'myModelProperty'中找不到不同的支持对象'xxx'

我的守则

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

Answer 1

这是一个支持双向数据绑定的多选列表实现.我用@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();
  }
}

Plunker

每当selectedValues某个组件逻辑更改属性时,updateSelectList()也必须调用,如"选择1和3"按钮回调逻辑中所示.

为了便于重用,这可能应该重构为属性指令.(任何接受者？)

Answer 2

为什么所有这些都使简单问题的答案复杂化.

如果您事先有必须选择的选项,您可以这样做:

这段代码很好:

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(',');

因此,您所要做的就是来自select标签的[(ngModel)]必须在角度部分进行初始化,其中一些值对应于来自option标签的[value]

这将根据数组中的值自动选择一个或多个选项.

Answer 3

正如其他人所说,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; });

Answer 4

你可以在我的 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;
      })
    }
  }
}