所以我試圖創建一個帶有 2 個選擇下拉串列的簡單表單。
一個選擇的國家。
一個選擇他們的州。
the idea is to display a list of countries and when one country is selected, the second select gets populated with its main states. （和 obv 維護資料系結）
我嘗試為我成功填充第一個選擇下拉串列的國家使用一個簡單的字串串列（盡管我不能為選擇 idk 為什么做一個占位符）
之后我宣告了第二個物件串列與每個國家的城市然后執行過濾功能以僅過濾出與所選國家/地區匹配的州串列，但我無法用它填充第二個選擇下拉串列。這是一個解釋得更好的 stackblitz 演示。
堆疊閃電戰
uj5u.com熱心網友回復：
您非常接近，當第一個下拉串列選擇了一個值時，您只需要一個適當的過濾器功能。使用像ngModelChange您這樣的事件可以輕松獲取所選值并執行過濾器以查找狀態串列。
零件：
onCountrySelect(selectedCountry) {
this.filteredStates = this.states.find(item => item.country === selectedCountry).stateList;
}
HTML:
<form>
<select name="countryName" [(ngModel)]="selectedCountry" (ngModelChange)="onCountrySelect($event)">
<option *ngFor="let c of countries" value="{{ c }}">{{ c }}</option>
</select>
<select name="states" id="states" [(ngModel)]="selectedState">
<option *ngFor="let s of filteredStates" value="{{ s }}">{{ s }}</option>
</select>
</form>
Stackblitz 演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/535082.html
標籤：有角度的选择落下自动填充
上一篇：Typescript中的Null和Undefined檢查-AngularForms
下一篇：有角度的Ngrx