如何确保在 Angular2 中设置 ngmodel 后触发选择更改事件？答案

【问题标题】：How do I ensure a select change event fires AFTER ngmodel is set in Angular2?如何确保在 Angular2 中设置 ngmodel 后触发选择更改事件？
【发布时间】：2017-05-09 11:06:31
【问题描述】：

我有一个 select 元素，它附加了一个基本（更改）处理程序以及一个 ngmodel。当设置了具有 ng 值的 <option> 时，更改处理程序会触发。问题是 [(ngModel] 还没有新值。

<div>
        <button style="margin: 8px 0;" (click)="getNextLink()" class="btn btn-primary btn-sm pull-right">Next Label ></button>
        <div class="form-group">
            <label for="filter-word">Select Word To Filter:</label>
            <select [(ngModel)]="selectedLabels[selectedLabels.length]"
                    (change)="onChange($event)"
                    class="form-control"
                    id="filter-word"
                    name="filter-word">
                <option *ngFor="let label of (primaryTopic.topics) | stringFilter: selectedLabels" [ngValue]="label">
                    {{label}}
                </option>
            </select>
        </div>
    </div>

这是组件代码：

  public onChange(event: any): void {
    console.log('event', event);
    console.log('this.selectedLabels', this.selectedLabels); // undefined
    debugger; 
  }

我如何仅在 ngModel 更新后做出响应？

【问题讨论】：

标签： javascript html angular select

【解决方案1】：

改用ngModelChange：

(ngModelChange)="onChange($event)"

无法指定事件处理程序的执行顺序。因为ngModelChange 本身是由NgModel 在更新绑定属性后发出的，所以这应该符合您的需求。

【讨论】：

完全按照预期工作。感谢您的及时回复！