html - 角度材料两个自动完成字段（optionSelected）不起作用

Question

我在 (optionSelected) 之后重新发送请求以更新第二个自动完成的输入值时遇到问题。

我有两个自动完成字段。在第一个中更改值后，第二个从 api 获取值。但是，当我删除第一个字段中的值时，第二个自动完成字段的查询不会更新。

这是我的代码示例：

  OnProvinceSelected(event) {
    this.provinceId = event.id;
    this.filteredOptionsCountie = this.step.get('province').valueChanges.pipe(
      startWith(''),
      debounceTime(400),
      distinctUntilChanged(),
      map(val => typeof val === 'string' ? val : val.name),
      switchMap(val => {
        return this.filterCountie(val || '');
      }),
      finalize(() => console.log('Sequence complete'))
    );
  }

  filterCountie(val: string): Observable<Location[]> {
    return this.service.getDataCounties(this.provinceId)
      .pipe(
        map(response => response.filter(option => {
          return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0;
        })),
        finalize(() => console.log('Sequence complete'))
      );
  }

        <input formControlName="province"
               type="text"
               [matAutocomplete]="provinceA">
        <mat-autocomplete #provinceA="matAutocomplete" [displayWith]="displayFn" (optionSelected)="OnProvinceSelected($event.option.value)">
          <mat-option *ngFor="let option of filteredOptionsProvinces | async" [value]="option">
            {{option.name}}
          </mat-option>
        </mat-autocomplete>

        <input formControlName="countie"
               type="text"
               [matAutocomplete]="countieA">
        <mat-autocomplete #countieA="matAutocomplete" [displayWith]="displayFn" (optionSelected)="OnCountieSelected($event.option.value)">
          <mat-option *ngFor="let option of filteredOptionsCountie | async" [value]="option">
            {{option.name}}
          </mat-option>
        </mat-autocomplete>

标签： htmlangulartypescript