角材料简单垫自动完成不起作用

Question

我已经在这个问题上花了 3 天多，我不知道该怎么办了。 我试图在 stackblitz 中设置一个最小的工作示例，但它在那里工作得很好。

我在一个反应​​式表单中有一个简单的 mat-autocomplete，直接从文档中编写代码：

<mat-form-field class="w-100">
   <input type="text"
                matInput
                [formControl]="clientControl"
                [matAutocomplete]="auto">

    <mat-autocomplete #auto="matAutocomplete">
       <mat-option *ngFor="let c of testClients" [value]="c">{{ c }}</mat-option>

    </mat-autocomplete>
</mat-form-field>

单击时根本不显示选项。 当我检查代码时，mat-autocomplete 中没有 mat-options。 我什至尝试放置一堆 mat-option 标签（没有 ngFor），但它们仍然没有显示，所以 ngFor 不是问题。

Answer 1

所以，我刚刚意识到这些选项显示在<div class="cdk-overlay-container"> 。 我不知道以前的程序员做了什么，但它没有显示在网站上，它显示在它之后，所以它不可见。

编辑： angular.json 文件没有角度材料样式表。 问题解决了

Answer 2

您在.ts中缺少过滤器方法

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

this.clientControl.valueChanges.subscribe(newValue=>{
    this.filteredClients = this.filterClients(newValue);
})

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

filterClients(search: string) {
    return this.testClients.filter(value=>
    value.toLowerCase().indexOf(search.toLowerCase()) === 0);
}

所以，你用你的testClients阵列为基础数组，你filteredClients阵列在你的HTML：

<mat-option *ngFor="let n of filteredClients" [value]="c">
    {{c}}
</mat-option>

过滤不是自动的，您必须使用自定义方法来过滤选项。