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

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>

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

表单声明

    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

我太傻了，第一个是更改更新，第二个是提交更新。

我只添加了自动完成字段的更新更新，就像一个魅力。