已选择Angular 4多个下拉列表

时间:2017-12-05 09:14:46

标签: angular angular4-forms

我想要做的是选择多个选择。

以下是我的HTML

<div class="form-group"  *ngIf="edituserForm">
   <label for="exampleFormControlSelect2">User</label>
   <select multiple  class="form-control" id="exampleFormControlSelect1" name="user_id" #user_id="ngModel" [(ngModel)]="this.edituser_id" required>
       <option *ngFor="let user of users;" [value]="user.user_id" [selected]="this.edituser_id == user.user_id">{{user.employee_no}}</option>
   </select>
</div>

{{this.edituser_id}}

<button type="button" (click)="edit()">Edit</button>

我的组件

edituser_id: any = [];
edituserForm: boolean = false;

edit(){
 this.edituserForm = true;
 this.edituser_id = ["1","2"];
}

以下是始终选择没有第二位用户的第一位用户的屏幕

enter image description here

以下是我在屏幕上想要的内容 enter image description here

我已经尝试了很多方法,但仍然无法做到。希望你们能帮助并真正感激它。

1 个答案:

答案 0 :(得分:0)

您可以在模板中执行此操作:

<div class="form-group"  *ngIf="edituserForm">
    <label for="exampleFormControlSelect2">User</label>
    <select multiple  class="form-control" id="exampleFormControlSelect1" name="user_id" #user_id="ngModel" [(ngModel)]="edituser_id" required>
        <option *ngFor="let user of users;" [value]="user.user_id" [selected]="edituser_id.includes(user.user_id)">{{user.employee_no}}</option>
    </select>
</div>