Angular2：如何绑定选择多个 [英] Angular2: how bind to select multiple

问题描述

我能使用ngModel为单一选择绑定，但我想绑定一个数组的多重选择的选项。当我尝试这个，我得到错误无法找到一个支持不同对象'myModelProperty

'XXX'

 ＆LT;选择多个[（ngModel）] =myModelProperty＆GT;
        ＆LT;选项* ngFor =myOptions的＃项目[值] =item.value＆GT; {{item.name}}＆LT; /选项＆GT;
＆LT; /选择＆GT;
 

解决方案

下面是一个支持双向数据绑定多选择列表实现。我使用 @ViewChild 而不是的getElementById（）。

  @Component（{
  选择：我的应用，
  模板：`{{title}}的＆LT; P＆GT;
  ＆LT;选择＃选择多（其他城市）=改变（$ event.target.options）＆GT;
    ＆LT;选项* ngFor =myOptions的＃项目[值] =item.value＆GT;
      {{项目名}}
    ＆LT; /选项＆GT;
  ＆LT; /选择＆GT;
  ＆LT; BR＆GT;＆LT;按钮（点击）=changeOptions（）＆GT;选择1和3'，/按钮＆GT;
  ＆所述p为H.; {{selectedValues​​ | JSON}}`
}）
出口类AppComponent {
  @ViewChild（'选择'）selectElRef;
  标题=角2β - 多选择列表;
  myOptions = [
    {值：1，名称：一}，
    {值：2，名称：两节}，
    {值：3，名称：三}];
  selectedValues​​ = ['1'，'2'];
  myModelProperty = this.myOptions [0];
  构造函数（）{console.clear（）; }
  ngAfterViewInit（）{
    this.updateSelectList（）;
  }
  updateSelectList（）{
    让选项= this.selectElRef.nativeElement.options;
    对于（让我= 0; I＆LT; options.length;我++）{
      选项​​[I] .selected = this.selectedValues​​.indexOf（选项[I]。价值）GT; -1;
    }
  }
  变化（选项）{
    this.selectedValues​​ = Array.apply（NULL，期权）//转换为真正的数组
      .filter（选项=＆GT; option.selected）
      .MAP（选项=＆GT; option.value）
  }
  changeOptions（）{
    this.selectedValues​​ = ['1'，'3'];
    this.updateSelectList（）;
  }
}
 

<大骨节病> Plunker

每当 selectedValues​​ 属性是由一些组件逻辑改变， updateSelectList（）也必须被调用，因为是在选择1和3按钮回调逻辑图所示。

有关更容易重用，这可能应该重构到一个属性指令。 （赞成吗？）

I'm able to bind using ngModel for a single select but I would like to bind an array to the multiple selected options. When I attempt this I get the error "Cannot find a differ supporting object 'xxx' in 'myModelProperty'

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

解决方案

Here's a multi-select list implementation that supports two-way databinding. I use @ViewChild instead of 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

Whenever the selectedValues property is changed by some component logic, updateSelectList() must also be called, as is shown in the "select 1 and 3" button callback logic.

For easier reuse, this should probably be refactored into an attribute directive. (Any takers?)

这篇关于Angular2：如何绑定选择多个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！