javascript - Angular2 选择中的模型何时反射(reflect)更改

Question

我有一个这样的选择字段:

<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)在我的模型上？

Answer 1

ngModel 不支持绑定(bind)到由 ngFor 创建的变量。

改用

[(ngModel)]="filters[idx].name"

你也可以试试

(ngModelChange)="changeFilter(idx, $event)"

ngModelChange 可能在值更改后发出，而对于 (change) 它取决于浏览器首先处理什么事件和事件处理程序(AFAIR ngModel 使用输入)