select 数组第一个索引的下拉值默认值 angular 7 safari

Question

我正在使用 Safari 并尝试将数组第一个索引设置为 select 下拉列表中的默认选项，但不知何故默认情况下它没有显示任何选项。我不想在代码方面处理它，因为某些值可能来自服务。

我尝试了 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

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

Answer 2

这是我的解决方案

On your template

<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>

On your Typescript, add this:

public defaultSelect = "default";

希望对您有所帮助

[编辑]

当您声明属性 defaultSelect = "default" 时，<option> 中的值将设置为 "default" 和 first option is selected。下拉列表中的Select Cities总是先被选中显示

select 数组第一个索引的下拉值默认值 angular 7 safari

select dropdown value default of first index of array angular 7 safari

html

javascript

html-select

drop-down-menu

angular