角度材料自动完成过滤器不起作用

Question

我在我的应用程序的一页上设置了一个带有过滤功能的材料自动完成字段，它工作得很好。

我想使用相同的代码在另一页上设置另一个页面，但在这个新页面上，除了过滤器之外，一切正常。

在第一个正在运行的版本中，如果我通过登录到控制台来跟踪值更改，则每次值更改时我都会通过在字段中选择或键入文本来获取日志。

在第二个中，我进行了相同的测试，但控制台没有任何内容。

所以它的声音值变化永远不会被触发，但我不明白为什么。

这是我的代码的摘录。

HTML 模板

                    <mat-form-field *ngIf="!this.globalVariables.adminUser.ownSiteUserAdmin" appearance="fill">
                        <mat-label i18n>Site</mat-label>
                        <input fxFlex matInput formControlName="siteSelector" [matAutocomplete]="autoSiteForm"
                            i18n-placeholder placeholder="Type text to filter Sites">
                        <mat-autocomplete #autoSiteForm="matAutocomplete" [displayWith]="this.utils.displayItemLabel">
                            <mat-option *ngFor="let suggestedSite of filteredSuggestedSites | async "
                                [value]="suggestedSite">
                                {{suggestedSite.label}}
                            </mat-option>
                        </mat-autocomplete>
                        <mat-hint i18>Click to select Site</mat-hint>
                        <mat-error>
                            <div *ngIf="selectedSite.hasError('required')" i18n>Site is required.</div>
                        </mat-error>
                    </mat-form-field>

我尝试用 [formControl] 替换 formControlName 但同样的问题。

表格声明

    this.userFormGroup = this.formBuilder.group(
      {
        title: [''],
        firstName: ['', Validators.required],
        lastName: ['', Validators.required],
        telephone: ['', Validators.pattern(GlobalConstantsService.PHONE_REGEX_PATTERN)],
        email: ['', { updateOn: 'change', validators: Validators.pattern(GlobalConstantsService.EMAIL_REGEX_PATTERN) }],
        description: [''],
        userName: ['', Validators.required, this.isUserNameValidValidator.validate.bind(this.isUserNameValidValidator)],
        password: ['', Validators.required],
        accountStartDate: [''],
        accountEndDate: [''],
        siteSelector: [null, Validators.required]
      },
      {
        updateOn: 'submit'
      },
    );

订阅ngOnInit中的变化

    this.filteredSuggestedSites = this.userFormGroup.get('siteSelector').valueChanges
      .pipe(
        startWith(''),
        map(value => this.utils._filterItemSelector(value, this.suggestedSites))
      );

过滤功能

  _filterItemSelector(value: string, items: ItemSelector[]): ItemSelector[] {
     if (typeof value === 'string') {
      const filterValue = value.toLowerCase();
      return items.filter(item => item.label.toLocaleLowerCase().includes(filterValue));
    } else {
      // value is an ItemSelector i.e. user has selected a value i.e. filter is not needed
      return items;
    }
  }

Answer 1

我太愚蠢了，第一个是更改时更新，第二个是提交时更新。

我仅使用自动完成功能添加字段更改更新，效果就像一个魅力。

Answer 2

(input)="onInputChange($event.target.value)"

将上面的行添加到 mat-form-field

onInputChange（值：字符串）{

this.filteredParams = this.myControl.valueChanges.pipe(
  startWith(value),
  tap(value => console.log("Value: ", value)),
  map(val => this._filter(val)),
);

}

这会很好用