AngularDart组件change回调中获取选中选项？绑定值为null问题排查

你碰到的这个问题其实是个常见的Angular时机问题——原生DOM的change事件触发得比Angular的ngModel更新要早，所以当你执行onFilterCategory的时候，组件里的selectedCategoryId还没被新选中的值同步过来，自然打印出来是null。

给你两个靠谱的解决办法，优先推荐第一个：

方法一：用Angular的ngModelChange替代原生change事件 #

这个事件是Angular专门为ngModel绑定提供的，会在模型值更新完成后再触发，完美匹配你的需求。修改后的HTML代码如下：

<select id="category" class="form-control" [(ngModel)]="selectedCategoryId" (ngModelChange)="onFilterCategory()">
  <option *ngFor="let category of categories" [value]="category.id"> {{category.name}} </option>
</select>

顺便提一句，把option里的value="{{category.id}}"改成[value]="category.id"是更规范的Angular属性绑定写法，效果一致但更符合框架最佳实践。

你的Dart代码完全不用改，保持原样即可：

void onFilterCategory() {
  print('onFilterCategory');
  print('this.selectedCategoryId: ' + this.selectedCategoryId);
}

方法二：如果非要用原生change事件，通过事件对象获取值 #

要是你因为某些原因必须保留原生change事件，可以通过传入的事件对象直接获取当前选中的值，甚至手动同步到模型里：

修改后的HTML：

<select id="category" class="form-control" [(ngModel)]="selectedCategoryId" (change)="onFilterCategory($event)">
  <option *ngFor="let category of categories" [value]="category.id"> {{category.name}} </option>
</select>

对应的Dart代码：

void onFilterCategory(Event event) {
  var selectElement = event.target as HtmlSelectElement;
  String selectedValue = selectElement.value;
  print('onFilterCategory');
  print('selected value: ' + selectedValue);
  // 若需要同步更新模型，也可以手动赋值
  this.selectedCategoryId = selectedValue;
}

简单总结：原生change是DOM层面的事件，Angular还没来得及更新模型；ngModelChange是Angular框架内的事件，会等模型更新完再触发，所以前者会拿到旧值/空值，后者能拿到最新值。

内容的提问来源于stack exchange，提问作者Luc Wollants