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

像这样使用：

<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

当您使用select控件绑定值时，您必须为model.userSelected赋值。你没有在你当前的代码中传递任何东西，为什么它没有选择任何元素。

尝试这样，创建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>

Angular4：默认选择选项值

2 个答案: