angular - Angular FormControl valueChanges 无法使用 mat-autocomplete

Question

我不知道为什么当我尝试通过输入来过滤员工数据时我的 formControl valueChanges 没有触发mat-autocomplete。这是我的component.ts和HTML分别

myForm: FormGroup;

constructor(
  private formBuilder: FormBuilder,
) {
  this.prepareForm();
}


ngOnInit(): void {
  this.myForm.get('employeeId') ? .valueChanges.subscribe((x) => {
    console.log('Detect changes', x); // Not showing any console messages
  });

  this.filteredEmployees = this.packageBenefitForm.controls.employeeId.valueChanges.pipe(
    startWith(''),
    map((value) => this._filter(value))
  );
}

prepareForm(packageBenefit ? : PackageBenefit): void {
  this.myForm = this.formBuilder.group({
    employeeId: [
      packageBenefit ? packageBenefit ? .employeeId : '',
      Validators.compose([Validators.required]),
    ],
  });
}

和 HTML

<div class="mt-3">
  <mat-form-field class="example-full-width">
    <mat-label>Employee</mat-label>
    <input type="text" matInput formControlName="employeeId" [matAutocomplete]="auto" />
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectEmployee($event)"
      [displayWith]="displayFnEmployee">
      <mat-option *ngFor="let employee of filteredEmployees | async" [value]="employee">
        {{ employee.firstName }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</div>

我也试过用this.packageBenefitForm.get('employeeId').valueChanges，还是一样的问题。

有趣的是它在 Stackblitz 中工作，但不在我的应用程序中。这是 stackblitz 演示应用程序

标签： angularangular-materialangular-reactive-forms