在 MS Edge 中,选择选项时模型不会更改
In MS Edge the Model does not change when selecting an option
当与 Angular 2 一起使用时,Edge 中的 HTML select 元素有两个问题:
- 默认 selection 是使用 *ngFor
最后添加的选项
- 当 select 选项时,模型不会使用新的 selected 选项进行更新。
请检查这个 Plunker:
https://plnkr.co/edit/MdNOlv?p=preview
//our root app component
import {Component, Directive, Output, EventEmitter, Input, SimpleChange} `from 'angular2/core'`
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
//import 'rxjs/Rx';
@Component({
selector: 'my-app',
template:`
<h1>Selecting Number</h1>
<select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()">
<option *ngFor="#level of levels" [ngValue]="level.num">{{level.name}}</option>
</select>
{{levelNum}}
`,
})
export class App {
levelNum:number;
levels:Array<Object> = [
{num: 0, name: "AA"},
{num: 1, name: "BB"}
];
toNumber(){
this.levelNum = +this.levelNum;
console.log(this.levelNum);
}
}
将 Angular 更新到 Beta 16 后,此问题已解决。
当与 Angular 2 一起使用时,Edge 中的 HTML select 元素有两个问题:
- 默认 selection 是使用 *ngFor 最后添加的选项
- 当 select 选项时,模型不会使用新的 selected 选项进行更新。
请检查这个 Plunker: https://plnkr.co/edit/MdNOlv?p=preview
//our root app component
import {Component, Directive, Output, EventEmitter, Input, SimpleChange} `from 'angular2/core'`
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
//import 'rxjs/Rx';
@Component({
selector: 'my-app',
template:`
<h1>Selecting Number</h1>
<select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()">
<option *ngFor="#level of levels" [ngValue]="level.num">{{level.name}}</option>
</select>
{{levelNum}}
`,
})
export class App {
levelNum:number;
levels:Array<Object> = [
{num: 0, name: "AA"},
{num: 1, name: "BB"}
];
toNumber(){
this.levelNum = +this.levelNum;
console.log(this.levelNum);
}
}
将 Angular 更新到 Beta 16 后,此问题已解决。