gpt4 book ai didi

javascript - 2个选择选项和默认值的 Angular 问题

转载 作者:行者123 更新时间:2023-11-30 20:00:21 24 4
gpt4 key购买 nike

我对 Angular 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'];
}
}

一开始没有问题,默认值显示为占位符:

enter image description here

但是当我在下拉列表中选择街道选择的值,然后单击城市选择的另一个值时,街道列表的第一个索引显示为占位符并且“选择”在下拉列表中显示为禁用:

enter image description here

当我点击街道的下拉列表时,我得到:

  • 选择//禁用的
  • CH DU LAC-A-L'ORIGINAL
  • 莫德街
  • 等...

每次切换城市选项时,如何强制街道选择将“选择”作为默认值占位符???

最佳答案

其实是有办法的:)在 react 形式的情况下只需要重置表单控件:

this.yourFormGroup.get('nameOfYourFormControl').reset()

然后会再次取默认值。

希望有一天能对某人有所帮助

关于javascript - 2个选择选项和默认值的 Angular 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53449447/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com