角材料自动完成不起作用，没有显示错误

Posted 2023-03-13

【中文标题】角材料自动完成不起作用，没有显示错误

【英文标题】：Angular material autocomplete not working, no errors shown

【发布时间】：2018-06-28 11:07:47

【问题描述】：

我已经实现了我的自动完成功能，没有错误，一切似乎都很好，但绝对没有任何反应。我在输入字段中输入了一些内容，但似乎没有任何操作发生，控制台中没有显示任何内容。

html

  <form>
    <mat-form-field>
      <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
    </mat-form-field>

    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let n of testValues" [value]="n">
        n
      </mat-option>
    </mat-autocomplete>
  </form>

TS

import  MatAutocomplete  from '@angular/material/autocomplete';
import  FormControl  from '@angular/forms';
...
public testValues = ['one', 'two', 'three', 'four'];
public myControl: FormControl;
...
constructor() 
    this.myControl = new FormControl();

编辑：我已经导入了

import MatAutocompleteModule from '@angular/material/autocomplete';

在我的应用模块中。

材料版本 -

"@angular/material": "^5.0.0-rc.2",

【问题讨论】：

您是否将 MatAutocompleteModule 放入您的模块导入中？

是的，我的模块导入中有它

【参考方案1】：

您的.ts 中缺少过滤方法

您必须以这种方式订阅您的myControl valueChanges：

this.myControl.valueChanges.subscribe(newValue=>
    this.filteredValues = this.filterValues(newValue);
)

因此，每当您的表单控件值更改时，您都会调用自定义的filterValues() 方法，它应该如下所示：

filterValues(search: string) 
    return this.testValues.filter(value=>
    value.toLowerCase().indexOf(search.toLowerCase()) === 0);

因此，您使用 testValues 数组作为基本数组，并在 html 中使用 filteredValues 数组：

<mat-option *ngFor="let n of filteredValues" [value]="n">
    n
</mat-option>

过滤不是自动的，您必须使用自定义方法来过滤选项。希望对你有帮助

【讨论】：

是的，它应该与过滤器一起使用。感谢您抽出宝贵时间，我尝试使用您的，但它给了我“找不到名称“startWith””和“找不到名称映射”。我在这里错过了一些导入吗？