在 mat-select/mat-option 中以编程方式触发 [compareWith]

Question

我有属于一个或多个团队的员工。我希望能够在我的下拉列表中选择多个员工，或者打开一个对话框来选择一个或多个团队。当我选择一些团队并单击确定时，我搜索属于该团队的员工并将他们添加到表单组元素“chosenEmployees”中。 chosenEmployees 的值正确更改，但下拉框中选中的值未更新。当我先选择一名员工然后打开团队对话框时，它会更新下拉框中选中的值。

<form [formGroup]="formGroup" *ngIf="this.formGroup"> 
 <div>
  <mat-form-field>
    <mat-label>{{ 'numbers' | translate }}</mat-label>
    <mat-select formControlName="chosenEmployees" [compareWith]="compareChosenEmployees" (selectionChange)="updateEmployees(chosenEmployees)" multiple disableOptionCentering>
      <mat-option *ngFor="let employee of allEmployees" [value]="employee">
        {{ employee.employeeId + '(' + employee.teamId + ')'}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <span fxFlex="5"></span>
  <button mat-button type="submit" color="primary" (click)="addTeam()">
    <mat-icon>add</mat-icon>
    <mat-label>{{ 'teams.add' | translate }}</mat-label>
  </button>
 </div>
</form>

在 .ts 中它看起来像这样：选择的员工变量：

public chosenEmployees: Employee[] = [];

我在 ngOnInit 函数中的 FormGroup：

 const formFields = {
  endDate: new FormControl(undefined),
  hasEnddate: new FormControl(true),
  chosenEmployees: [this.chosenEmployees]
};

this.formGroup = this.formBuilder.group(formFields);

我的 addTeam 函数：

addTeam(){
const dialogRef = this.dialog.open(AddTeamDialogComponent, {
  data:
  [
    this.chosenTeams,
    this.allTeams
  ]
});

dialogRef.afterClosed().subscribe((addTeamResult: AddTeamResult) => {
  this.changeDetectorRef.markForCheck();
  if (addTeamResult){
    this.chosenTeams = addTeamResult.teams;
    if (addTeamResult.teams !== undefined){
      addTeamResult.teams.forEach(team => {
        const employees =
          this.allEmployees.filter(emp => emp.teamId === team.id);
        employees.forEach(e => {
          if (this.chosenEmployees.length === 0){
            this.chosenEmployees.push(e);
          }
          else if (!(this.chosenEmployees.find(_ => _.employeeId === e.employeeId && _.teamId === team.id))){
            this.chosenEmployees.push(e);
          }
        });
      });
    }
    this.formGroup.controls.chosenEmployees.setValue(this.chosenEmployees);
    // this.formGroup.controls["chosenEmployees"].patchValue(this.chosenEmployees);
    // this.formGroup.patchValue({chosenEmployees: this.chosenEmployees});
    this.updateEmployees(this.chosenEmployees);
    this.changeDetectorRef.detectChanges();
  }
});}}

我尝试过的事情

在 html.
不使用 formGroup，而是使用 formControl，并在 html 中使用“formControl”。
formGroup.controls.chosenEmployees.setValue
formGroup.controls.chosenEmployees.patchValue
formGroup.markasdirty、formGroup.pristine、formGroup.touched
我尝试更新使用过的 angular 版本
不使用 [this.chosenEmployees] 但使用新的 FormControl(this.chosenEmployees)

Answer 1

我认为问题是this.chosenEmployees的值一开始是空的，你可以试试，在启动进程之前使用

this.chosenEmployees=this.chosenEmployees || []

一定要以数组开头。

顺便说一句，您可以使用 spread operator 连接两个数组

//really I don't know what is your chosenEmployees
//I imagine that should be
//this.chosenEmployees=this.form.value.chosenEmployes || []
//but I don't know

this.chosenEmployees=this.chosenEmployees || []

addTeamResult.teams.forEach(team => {
    this.chosenEmployees=[...this.chosenEmployees,
          ...this.allEmployees.filter(emp => emp.teamId === team.id)]
})

在 mat-select/mat-option 中以编程方式触发 [compareWith]

Trigger [compareWith] programmatically in mat-select/mat-option

typescript

angular-material

angular