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

问题描述

我已经在此问题上花了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并不是问题。

解决方法

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

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

,

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

您必须通过以下方式订阅clientControl值更改：

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>

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