Angular 下拉菜单实现的一个例子

我在开发一个测试工具，用户可以手动从一个下拉菜单里，选择当前浏览器的 user agent 字段。

其中 My Browser 是当前浏览器真实的值，其他4个都是代码里硬编码的 fake user agent，如下图所示：

这个下拉菜单的实现：

<label>
  Fake a browser

  <select [formControl]="selectedBrowser">
    <option value="">
      My browser
    </option>

    <option *ngFor="let fakebrowser of fakeBrowsers"
      [value]="fakebrowser">
      {{ fakebrowser | replace:wordStartPattern:' $&' | trim}}
    </option>
  </select>
</label>

注意这里的设计，下拉菜单有显示给终端用户查看的字符串和 value，其中 My Browser 对应的值为“”，而其余 fake browser 每个 entry 的 value，绑定到 fakeBrowsers 数组的每个元素。

那么在 Component 代码里，如何获取当前用户选中的条目对应的值呢？

利用上图给 select 控件绑定的 formControl.

selectedBrowser = new FormControl(this.defaultOptionValue);

切换下拉菜单后，首先触发 fakeBrowserSelection$ 注册的订阅函数：

根源是我们实例化的 FormControl value 发生了变化，在 setValue 方法里触发我们的 Observable：

然后是 valueChanges 这个 Observable 发出的值，触发的订阅函数：

更多Jerry的原创文章，尽在："汪子熙":