选择下拉onChange和ngModel问题

我有一个简单的Angular 2组件，它有一个选择下拉列表，它具有与对象属性的双向绑定以及绑定到操作该对象的方法的更改事件。这里是组件选择下拉onChange和ngModel问题

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方法中的警报提前延迟并且它似乎正常工作。

为了演示它更好，我已经安装了一个演示文稿here。

来源

2016-07-22 xmaestro

你不需要

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

的项目从通过选择相应的值testObject.selectVal选择通过[(ngModel)]

如果testObject.selectVal不包含Value 1一个，Value 2，或Value 3，然后用（用于字符串值）

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

或其他值如ob JECT

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

来源

2016-07-22 06:00:10

好点，但主要问题仍然存在。该值仍未按时更新。 – xmaestro

使用'（ngModelChange）=“save（）”'而不是 –

这也没有帮助 – xmaestro

可以作为替代，因为警报事件烧制的第一比ngModelChange

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

<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>

来源

2016-07-22 08:46:02 arven

我有(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); 

} 
}

希望这有助于你。

来源

2017-02-16 20:02:44

选择下拉onChange和ngModel问题

回答

相关问题