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毫秒，但有时更多。

现在，我确信这不是检测变化的最佳方式，我会知道如何正确地做到这一点，但我很好奇如何确定何时更改反映在我的模型上？

Answer 1

ngModel不支持绑定ngFor创建的变量。

改为使用

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

您也可以尝试

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

更改值后，可能会发出

ngModelChange，而(change)则取决于浏览器首先处理哪个事件和事件处理程序（AFAIR ngModel使用input）

何时更改反映在Angular2中的模型选择中

1 个答案: