我有一个这样的选择字段:
<div *ngFor="let filter of filters; let idx = index">
<select [id]="'name' + idx" [(ngModel)]="filter.name" (change)="changeFilter(idx, $event)">
<option val="a">A</option>
<option val="b">B</option>
</select>
</div>
我在组件上的 change()
函数没有立即检测到变化。简化:
@Component()
export class Filters {
public filters = [{name: "a"}, {name: "b"}, {name: "a"}];
public change(idx: number, $event: Event) {
console.log(this.filters[idx].name === $event.target.name); // false here
setTimeout(() => {
console.log(this.filters[idx].name === $event.target.name); // Now it's true
}, 10);
}
}
现在,如果我在选项之间进行更改,change() 函数需要一些时间 - 在 setTimeout
上通常少于 3 毫秒,但有时更多。
现在,我确信这不是检测变化的最佳方法,我会找出正确的方法,但我很好奇如何确定变化何时反射(reflect)在我的模型上?
最佳答案
ngModel
不支持绑定(bind)到由 ngFor
创建的变量。
改用
[(ngModel)]="filters[idx].name"
你也可以试试
(ngModelChange)="changeFilter(idx, $event)"
ngModelChange
可能在值更改后发出,而对于 (change)
它取决于浏览器首先处理什么事件和事件处理程序(AFAIR ngModel
使用输入
)
关于javascript - Angular2 选择中的模型何时反射(reflect)更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37855051/