Question

我有一个简单的Angular 2组件，它有一个select下拉列表，它具有对象属性的双向绑定，还有一个绑定到操作该对象的方法的change事件。这是组件

import {Component} from '@angular/core'

@Component({
 selector: 'my-app',
 providers: [],
 template: `
  <div>
    <h2>Hello {{name}}</h2>

    <select (change)="save()" [(ngModel)]="testObject.selectVal">
      <option [selected]="testObject.selectVal=='Value 1'">Value 1</option>
      <option [selected]="testObject.selectVal=='Value 2'">Value 2</option>
      <option [selected]="testObject.selectVal=='Value 3'">Value 3</option>
    </select>

</div>
`,
directives: []
})
export class App {

 testObject:any;

 constructor() {
   this.name = 'Angular2 (Release Candidate!)'

   this.testObject = {
     selectVal : "Value 2"
   }

 }

 save(){

   alert(this.testObject.selectVal);

 }
}

当我更改选择时，它应该提醒当前所选选项的值，但它始终显示选择下拉列表的最后一个值。我感觉在ngModel更新和change触发器之间存在竞争条件，因为我尝试在save方法中的警报之前加载延迟并且它似乎工作正常

为了更好地演示，我已经设置了演示plnkr here。

Answer 1

您不需要

[selected]="testObject.selectVal=='Value 1'"

该项目是从传递给testObject.selectVal

选择的值[(ngModel)]中选择的

如果testObject.selectVal不包含Value 1，Value 2或Value 3中的一个，则使用（对于字符串值）

  <option [value]="someVal">Value 1</option>

或其他值，如对象

  <option [ngValue]="someVal">Value 1</option>

Answer 2

您可以使用替代方法，因为警报事件首先触发而不是ngModelChange

＆＃13;

public save(item){
	   alert(item);
	 }

＆＃13;

<select (change)="save(item.value)" #item [(ngModel)]="testObject.selectVal">
      <option [selected]="testObject.selectVal=='Value 1'">Value 1</option>
      <option [selected]="testObject.selectVal=='Value 2'">Value 2</option>
      <option [selected]="testObject.selectVal=='Value 3'">Value 3</option>
    </select>

＆＃13;

Answer 3

我在(change)处理程序和模型绑定中具有相同的竞争条件。使用(ngModelChange)为我解决了这个问题（documentation link）。

意思是，在你的情况下：

import {Component} from '@angular/core'

@Component({
 selector: 'my-app',
 providers: [],
 template: `
  <div>
    <h2>Hello {{name}}</h2>

    <select (ngModelChange)="save()" [(ngModel)]="testObject.selectVal">
      <option [selected]="testObject.selectVal=='Value 1'">Value 1</option>
      <option [selected]="testObject.selectVal=='Value 2'">Value 2</option>
      <option [selected]="testObject.selectVal=='Value 3'">Value 3</option>
    </select>

</div>
`,
directives: []
})
export class App {

 testObject:any;

 constructor() {
   this.name = 'Angular2 (Release Candidate!)'

   this.testObject = {
     selectVal : "Value 2"
   }

 }

 save(){

   alert(this.testObject.selectVal);

 }
}

希望这会对你有所帮助。

选择下拉onChange和ngModel问题

3 个答案: