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

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

我仅使用自动完成功能在字段更改上添加更新，效果非常好。

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

1 个答案: