0

我在这个问题上花了超过 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 不是问题。

4

2 回答 2

0

您在您的.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>

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

于 2020-11-06T02:13:11.250 回答
0

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

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

于 2020-11-06T01:46:05.533 回答