Angular4：默认 select 选项值

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>

提前致谢。安德里亚

Answer 1

您必须为 model.userSelected 赋值，因为您将它与 select 控件绑定。你没有在你当前的代码中传递任何东西，这就是为什么它没有 selecting 任何元素。

像这样尝试，创建 ID 为 -1 的默认用户并绑定它。

component.ts

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

html

--不要将完整的对象 user 绑定为值，像下面那样绑定对象的 id

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

Answer 2

这样使用：

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

Angular4：默认 select 选项值

Angular4: default select option value

html-select

angular