选择了 Angular 4 多个下拉列表答案

【问题标题】：Angular 4 multiple dropdown selected选择了 Angular 4 多个下拉列表
【发布时间】：2017-12-05 09:14:45
【问题描述】：

我想要做的是多选。

下面是我的 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"];
}

下面是始终选择第一个用户而不选择第二个用户的屏幕

下面是我想要的屏幕内容

我已经尝试了很多方法，但仍然无法做到。希望你们能提供帮助并非常感激。

【问题讨论】：

您不应在模板中使用“this”关键字。 [selected]="this.edituser_id == user.user_id" 应该是 [selected]="edituser_id == user.user_id"。 edituser_id 也是一个数组。您需要检查 user.user_id 是否存在于该数组中
检查我的答案
试过你的代码，它工作正常，但我不得不猜测一些部分，因为你没有提供最小的代码来重现这个问题。所以请这样做:)

标签： angular angular4-forms

【解决方案1】：

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

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

【讨论】：

感谢您的回答，但遗憾的是仍然只选择了第一个用户