我们如何在Angular 6的多个选择列表中动态选择一些选项答案

【问题标题】：How we dynamically Select Some Options In multiple Selection List In Angular 6我们如何在Angular 6的多个选择列表中动态选择一些选项
【发布时间】：2018-12-13 06:47:51
【问题描述】：

我有一个用于编辑数据的表单。在它是一个用户复选框的下拉列表，多选。我从配置文件数据对象的数据库中获取先前选择的选项数组 []，并且我想在编辑配置文件表单中显示这些用户。当用户编辑他们的个人资料时，他们可以看到他们之前选择的内容。

<div class="form-group">
  <mat-form-field>
    <mat-select 
      placeholder="Users" 
      formControlName="usersdata" 
      [(ngModel)]="selectedUser" multiple>
      <mat-option 
        *ngFor="let datausers of users" 
        (click)="clickedOption()" 
        [value]="datausers.user_id">
          {{datausers.employee_name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

我有这个用于捕获empData 的数组。在数据库中：

empData = [];

this.https.get < any > (this.selectedUser_API).subscribe((response) => {
  this.empData = response.empData;
});

【问题讨论】：

How to populate mat-select with angular material?的可能重复
您可能想要创建一个 ReactiveForm，然后在其上调用 patchValue/setValue 方法来初始化 FormControl 的值。
是的，我会尝试，但它不起作用。 for (let i = 0; i

标签： angular

【解决方案1】：

在您的 .html 文件中

<div class="form-group">
  <mat-form-field>
    <mat-select 
      placeholder="Users" 
      formControlName="usersdata" 
      [(ngModel)]="selectedUsers" multiple>
      <mat-option 
        *ngFor="let datausers of users" 
        (click)="clickedOption()" 
        [value]="datausers.user_id">
          {{datausers.employee_name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

在您的 .ts 文件中

selectedUsers = []
this.https.get < any > (this.selectedUser_API).subscribe((response) => {
  this.empData = response.empData;
  this.selectedUsers =  this.empData.map(
      data => data.user_id
    )
//assuming this.empData is a user object array.
});

selectedUsers 应该包含 user_id 的非用户对象。

【讨论】：