選擇數組angular 7 safari第一個索引的下拉值默認值

Question

我正在使用 Safari 並嘗試將數組第一個索引作為選擇下拉列表中的默認選項，但不知何故默認情況下它不顯示任何選項。 我不想在代碼方面處理這個問題，因為有些值可能來自服務。

我試過 selected="selected" 但沒有幫助。

有什么辦法可以讓我們直接將選項設為默認值？ 還是手動？

下面是我的代碼和 stackblitz。

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>

Answer 1

這是我的解決方案

在你的模板上

<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將始終首先被選中並顯示

Answer 2

您需要在 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>