Angular valueChanges已激发，但未选择任何内容

我是个新手，遇到了一个奇怪的现象。 我有一个自定义材质多选组件的表单，它有一个额外的“全部”选项来选择/取消选择所有选项，默认情况下在组件启动时选择。表单提交后，其值保存在存储区（NgRx）中，然后从结果组件返回时修补到表单。选择组件的formControl具有精确的修补值，但在此组件中未选择任何内容。该值仍在formControl中，并且在我重新提交表单时有效

以下是自定义选择组件的值更改：

this.control.valueChanges.pipe(
  takeUntil(this.destroy$),
  distinctUntilChanged(),
).subscribe(
  (next: SelectOption[]) => {
    this.cdr.detectChanges();

    if (next) {

      let toSelectAll: boolean = JSON.stringify(next) === JSON.stringify(this.options);

      if (this.all && toSelectAll && ignoreValueChanges == false) {
        this.allMatOption.select();
        if (next.indexOf(this.allSelectOption) < 0) {
          next.push(this.allSelectOption);
          ignoreValueChanges = true;
          this.control.setValue(next);
        }
      }
      ignoreValueChanges = false;
      this.control.setValue(next);
      this.selectedChips = this.filteredOptions(next);
      // this.control.updateValueAndValidity();
      this.logger.debug('[' + this.inputLabel + '] valueChanges\n', this.control.value);
    }
  }
);

  public compareFn(s1: SelectOption, s2: SelectOption) {
    return s1 && s2 && s1.key === s2.key;
  }

}

模板：

  <mat-select
    [formControl]="control"
    [placeholder]="placeholder"
    (selectionChange)="onSelectionChanged($event)"
    [(compareWith)]="compareFn"
    multiple
  >

{{inputLabel}}
{{option.label}
取消
{{allSelectOption.label}
{{option.label}

经过几天的研究，我终于发现了问题！ 在“writeValue（obj）”时刻，formControl将每个值与所有选项进行比较。但是当值和选项是自定义对象（类）时，它会比较“引用”而不是值。要修复它，我必须在模板中添加compareWith指令：

  <mat-select
    [formControl]="control"
    [placeholder]="placeholder"
    (selectionChange)="onSelectionChanged($event)"
    [(compareWith)]="compareFn"
    multiple
  >

现在它工作得很好