Reactive Form AutoComplete AsyncPipe 無法動態更新

General
1

已更新此問題範例如下 :

問題說明:

有兩個輸入欄位 Country , City 兩個欄位皆用autocomplete 實現

預期在輸入Country 後 可以透過後端取得City 去update City 的資料

image

Autocomplete 各自的部分都沒有問題 ，

但在後端取得City 的資料時會無法更新city$，

我目前的做法如下:

//  無法使用 Country 透過 webapi 更新 city$

    this.city$ = this.form.get('Country').valueChanges
      .pipe(
        switchMap(country => of(this.cityData.filter(city => city.country === country.value)))
      )

請問該如何達成此功能呢?

2

能在 stackblitz 上面提供比較完整的程式碼嗎? 這樣子有點難看出問題點在哪裡

1個讚
3

好的，我已更新貼文，
並附上stackblitz 連結
謝謝指教。

4

我修改了一個版本，你看看能不能讀懂, 不懂的地方再提出來討論

1個讚
5

有了解了
謝謝幫忙~