我在開發一個測試工具，用戶可以手動從一個下拉菜單里，選擇當前瀏覽器的 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的原創文章，盡在：“汪子熙”:

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Angular 下拉菜单实现的一个例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。