角度7的选择输入有问题。我有2个选择。当我选择第二个选择的选项时,其相应值的列表将显示在上方的选择输入中。并且必须显示一个默认值,就像它是一个占位符一样(“选择”)。但是问题是,当我在第二个选择中从一个值切换到另一个时,第一个选择中的占位符(“选择”)成为列表的第一个索引值:
<select class="dropdown-select" formControlName="street-dd">
<option class="dropdown-select" disabled selected [ngValue]="null">Select</option>
<option class="dropdown-select" *ngFor="let street of retrievedStreets">{{street}}</option>
</select>
<select class="dropdown-select"(change)="onCitySelected($event)" formControlName="city">
<option class="dropdown-select" *ngFor="let city of retrievedCities" [value]="city['city']">{{city["city"]}}</option>
</select>
此处为TS文件:
export class AddressComponent {
public retrievedCities: Array<any> = [];
public retrievedStreets: Array<any> = [];
private retrieveCities(cities: any) {
this.retrievedCities = [];
if (cities && cities.length > 0) {
this.retrievedCities = cities;
}
}
public onCitySelected(city) {
this.retrievedStreets = null;
this.retrievedStreets = this.lookupStreets(city);
console.log('retrieved street', this.retrievedStreets);
this.retrievedStreets = this.retrievedStreets.sort();
}
private lookupStreets(city): Array<any> {
return find(this.retrievedCities, {'city': city.target.value})['streets'];
}
}
一开始没有问题,默认值显示为占位符:
但是,当我在下拉菜单中选择街道的值时,然后单击城市选择的另一个值,街道列表的第一个索引显示为占位符,而下拉列表中的“选择”显示为禁用:
当我单击街道的下拉列表时,我得到:
每次切换城市选项时,如何强制街道选择将“选择”作为默认值占位符?
答案 0 :(得分:1)
实际上有一个解决方案:) 只需在反应式表单的情况下重置formcontrol:
this.yourFormGroup.get('nameOfYourFormControl')。reset()
然后将再次使用默认值。
希望有一天能对某人有所帮助