为什么当 registerOnChange 在 Angular 中触发 ngModelChange 时 ngModel 具有先前的值

Question

我的 Angular 8 组件实现了 ControlValueAccessor 接口，并且我实现了 registerOnChange 方法，我在选择一个项目时调用该方法，将更新的项目 ID 数组传递给我的回调。

我的组件选择器如下所示，我正在设置项目列表、模型（字符串数组）和模型更改事件。

<app-auto-complete [items]="labels" (ngModelChange)="refresh()"
                                       [(ngModel)]="filter.labels">
</app-auto-complete>

为简洁起见缩短了组件代码...

registerOnChange(fn: any) {
    this.onChangeCallback = fn;
}

onSelectItem(selectedItem: Lookup) {
    const idx = this.selectedItems.findIndex(i => i.id === selectedItem.id);
    this.selectedItems.push(selectedItem);
    this.onChangeCallback(this.selectedItems.map(i => i.id));
}

我的父组件中的刷新方法

refresh() {
 console.log(this.filter.labels); <--- has wrong model value
}

当我选择项目时，我调用 onChangeCallback 传入新的项目列表，这又会触发 ngModelChange 并调用刷新方法。 问题是 ngModel (filter.labels) 总是有以前的值，而我希望它有当前值。

有谁知道为什么 ngModel 有以前的模型值？

顺便说一句——如果我将 $event 传递给刷新方法，即 refresh($event)，它确实包含最新值。 但是，然后我需要将其重新分配给我的模型。 我宁愿让模型自动更新。

Answer 1

我想出了答案。 选择器中属性的顺序很重要。 一旦我更改了它，ngModel 就会包含正确的更新值。

这有效，在 ngModelChange之前使用 ngModel

<app-auto-complete [items]="labels" [(ngModel)]="filter.labels"
                                           (ngModelChange)="refresh()"></app-auto-complete>

这不起作用，在 ngModelChange之后使用 ngModel

<app-auto-complete [items]="labels" (ngModelChange)="refresh()"
                                       [(ngModel)]="filter.labels"></app-auto-complete>