Angular4: значение опции выбора по умолчанию

Question

Я пытаюсь установить первый параметр как значение по умолчанию, но он не работает, у вас есть какое-либо решение?

<select   class="form-control" name="user" id="user" required [(ngModel)]="model.userSelected">
         <option selected>-- SELECT USER-- </option>
         <option *ngFor="let user of users" [ngValue]="user">{{user.name}}</option>
</select>

спасибо заранее. Andrea

Answer 1

Используйте вот так:

<select class="form-control" name="user" id="user" required [(ngModel)]="model.userSelected"> <option value=''>-- SELECT USER-- </option> <option *ngFor="let user of users" [ngValue]="user">{{user.name}}</option>

И затем инициализировать model.userSelected в виде пустой строки:

model.userSelected = '' 

Answer 2

вам необходимо присвоить значение model.userSelected, поскольку вы связываете его с элементом управления select. Вы ничего не передаете в своем текущем коде, поэтому он не выбирает ни одного элемента.

попробуйте вот так, создайте пользователя по умолчанию с идентификатором -1 и привяжите его.

component.ts

ngOnInit() {
//pull add data 
model.userSelected = {name:'', id=-1} as User;
}

HTML

- не связывать полный объект user как значение, привязать идентификатор объекта, как это сделано ниже

<select   class="form-control" name="user" id="user" required
                           [(ngModel)]="model.userSelected.id">
         <option [ngValue]='-1'>-- SELECT USER-- </option>
         <option *ngFor="let user of users" [ngValue]="user.id">{{user.name}}</option>
</select>

или

просто вставьте элемент по умолчанию в первый список в массиве пользователей, после того как вы получите от всех пользователей вызов на сервер

    //push default element in array of user 
    user.unshift({name:'-- SELECT USER--', id=-1} as User);

 ngOnInit() {
    //pull add data 
    model.userSelected = {name:'', id=-1} as User;
    }

, затем

<select   class="form-control" name="user" id="user" required
                           [(ngModel)]="model.userSelected.id">
         <option *ngFor="let user of users" [ngValue]="user.id">{{user.name}}</option>
</select>