Question

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

<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;
});

Answer 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的非用户对象。

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

1 个答案: