我正在使用Safari,并尝试在选择下拉列表中将数组的第一个索引设为默认选项,但是默认情况下它不显示任何选项。我不想在代码方面进行处理,因为某些值可能来自服务。
我尝试了selected =“ selected”,但没有帮助。
有什么方法可以直接将选项设为默认值?还是手动?
下面是我的代码和堆栈闪电。
https://stackblitz.com/edit/angular-7aqzj2
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(
public form: FormBuilder
) {}
name = 'Angular 5';
selectedCountry: any;
public dropdown: FormGroup;
countrydrodown = [];
cities = {};
places = {};
texts = {};
countriesValue = [{
'id': 1,
'name': 'France'
}, {
'id': 2,
'name': 'Germany'
}, {
'id': 3,
'name': 'Italy',
}]
countries = [{
'id': 1,
'name': 'France',
'cities': ['Paris'],
'places': [
'effil tower',
'new discover'
],
'texts': ['a']
},
{
'id': 2,
'name': 'Germany',
'cities': ['Hamburg'],
'places': [],
'texts': ['b']
},
{
'id': 3,
'name': 'Italy',
'cities': ['Roma', 'Milan', 'Napoli'],
'places': [
'effil tower',
'new discover'
],
'texts': ['c']
},
];
ngOnInit() {
this.onChange(1);
this.serviceGetCountries();
this.dropdown = new FormGroup({
country: new FormControl(),
city: new FormControl(),
place: new FormControl(),
text: new FormControl()
});
}
getCountries() {
return Observable.of(this.countriesValue);
}
serviceGetCountries() {
this.getCountries().subscribe(res => {
this.countrydrodown = res;
console.log(this.countrydrodown);
});
}
onChange(deviceValue) {
console.log(deviceValue);
this.getValues(deviceValue).subscribe(res => {
console.log(res);
this.cities = res.filter(x => x.id == deviceValue)[0].cities;
this.places = this.countries.filter(x => x.id == deviceValue)[0].places;
this.texts = this.countries.filter(x => x.id == deviceValue)[0].texts;
console.log(Object.keys(this.places));
console.log(this.cities);
});
}
getValues(val) {
return Observable.of(this.countries);
}
}
<div [formGroup]="dropdown">
<div class="col">
<div class="row">
<select formControlName="country" class="rounded-inputs20 select-select col-md-3" (change)="onChange($event.target.value)">
<option selected *ngFor="let country of countrydrodown" [value]="country.id" selected="selected">{{country.name}}</option>
</select>
</div>
<div *ngIf="cities?.length > 0" class="row">
<div style=" padding-top: 0.5em; ">
<select formControlName="city" id="sel1" class="">
<option *ngFor="let city of cities" [ngValue]="city" selected="selected">{{city}}</option>
</select>
</div>
</div>
<div *ngIf="places?.length > 0" class="row">
<div style=" padding-top: 1em; ">
<label *ngFor="let place of places">
<input formControlName="place" type="radio">{{place}}
</label>
</div>
</div>
<div *ngIf="texts?.length > 0" class="row">
<div style=" padding-top: 1em; ">
<label *ngFor="let text of texts">{{text}} :
<input formControlName="text" type="text">
</label>
</div>
</div>
</div>
</div>
这是我的解决方法
在您的模板上
<select formControlName="country" class="rounded-inputs20 select-select col-md-3" (change)="onChange($event.target.value)">
<option value = "default" selected> Select Cities </option>
<option *ngFor="let country of countrydrodown" [value]="country.id">{{country.name}}</option>
</select>
<select formControlName="city" id="sel1" class="">
<option value = "default" selected> Select Cities </option>
<option *ngFor="let city of cities" [ngValue]="city">{{city}}</option>
</select>
在您的打字稿上,添加此:
public defaultSelect = "default";
我希望有帮助
[编辑]
当声明属性defaultSelect = "default"
时,<option>
内部的值将设置为"default"
,而该first option is selected
。下拉列表中的Select Cities
将始终被选择并首先显示
您需要像这样在formGroup中设置默认值:
this.dropdown = this.form.group({
country: [1, Validators.required], //1 is the default value
... (your others FormControl)
});
然后在视图中执行:
<option
*ngFor="let option of options"
[value]="option.value"
[innerHTML]="option.label"></option>