select 更改 angular 实施？

Question

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

我多么希望 angular 是这样。目前，我更好地理解了 ngmodel 并了解了如何使用主题来实现以下目标。

我有 select 个城市：

<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 个街区：

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

如果用户 select 的城市不是在 URL 中传递到此页面的城市，（这将是默认的 selected 我还没有建立那个)

我需要我的应用程序连接到我的数据库并使用该城市的街区重新填充街区 select 选项。

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

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

我会继续努力，但非常感谢您的建议！

Answer 1

您可以使用 ngModelChange:

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

在你的组件中：

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

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

Answer 2

在 Angular (v2+) 中，您可以直接绑定到 javascript DOM 事件。对于 select，事件 change 会在值更改时触发。因此，您可以像这样设置和响应事件：

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

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

Answer 3

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

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

因此，在您的城市select：

<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
}

select 更改 angular 实施？

select on change angular implementation?

javascript

subject

subject-observer

angular-ngmodel

angular