选择改变角度实现？

Question

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

我多么希望这是有角度的。目前我更好地理解 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+) 中，您可以直接绑定到 javascript DOM 事件。对于选择事件change，只要值发生变化就会触发。因此，您可以像这样设置和响应事件：

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

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

Answer 2

Angular 有类似的指令，称为 (change) 或 (ngModelChange)。

如果要根据 url 为城市设置初始值，则需要双向数据绑定。对于双向数据绑定，(ngModelChange) 是一种方法。

因此，在您的城市中选择：

<select [ngModel]="citySelect"
    (ngModelChange)="onCityChange($event)"
    name="citySelect"
    id="citySelect"
    class="form-control">
  <option *ngFor="let city of cities" [value]="{{city}}">{{city}}
  </option> <!--come back and wire up-->
</select>

然后，在你的组件中定义 onCityChange：

public onCityChange(chosenCity) {
  console.log(chosenCity);
  // populate neighborhoodlist based on chosenCity
}

Answer 3

你可以使用ngModelChange:

<select [(ngModel)]="citySelect" (ngModelChange)="myCitySpecificFunction()">

在您的组件中：

private myCitySpecificFunction(): void {
    console.log('City updated to ' + this.citySelect);
}

请注意，ngModelChange 必须在 ngModel 之后列在 html 元素上，否则它不会注册。