javascript - 选择更改 Angular 实现？

Question

angularjs 有一个名为 onchanges 的内置指令，它会监听 select 或其他内容中的更改，并允许您在更改时执行函数。

我多么希望这能如此有棱 Angular 。目前，我更好地理解 ngmodel 并了解如何使用主题来实现以下目标。

我选择了几个城市:

<div id="venueFilterParams" ngModelGroup="venueFilterParams">
          <!-- need to add default values from url-->
          <select [ngModel]="citySelect"
                  name="citySelect"
                  id="citySelect"
                  class="form-control">
            <option *ngFor="let city of cities" value="{{city}}">{{city}}</option> <!--come back and wire up-->
          </select>

以及精选的社区:

 <select [ngModel]="neighborhoodSelected"
                  name="neighborhood"
                  id="neighborhood"
                  class="form-control">
            <option *ngFor="let neighborhood of neighborhoodlist" value="{{neighborhood}}">{{neighborhood}}</option>
          </select>

如果用户选择的城市不是通向此页面的 URL 中传递的城市(这将是默认选择的，我还没有构建它)

我需要我的应用程序访问我的数据库并使用该城市的社区重新填充社区选择选项。

所有这些我都可以做得很好，我想要弄清楚的是代码将监听城市选择并运行执行上述操作的函数。

现在 [ngModel] = citySelect; 不会自行更新，我必须等待提交点击才能捕获值，但是 [(ngModel)] = citySelect 并监听citySelect 主题中的变量？

我将继续努力解决这个问题，但非常感谢您的建议!

Answer 1

在 Angular (v2+) 中，您可以直接绑定(bind)到 javascript DOM 事件。对于选择，只要值发生变化，change 事件就会触发。因此，您可以像这样设置并响应事件:

<select [(ngModel)]="citySelect" (change)="onCityChange()">

private onCityChange(): void {
    /* Your custom code */
}