Angular Material 9：如何修复 mat-select 内的 mat-form-field 中的错误

Question

我想过滤 mat-select 中的一些对象，但是一旦我在搜索框中点击 space 键，第一个元素就会被选中！知道如何解决这个问题吗？这是 mat-select 的错误吗？或者也许有更好的方法或正确的方法在 material desgin ?

中的多个 select 中添加搜索输入文本

 <mat-form-field>
    <mat-select placeholder="Books" multiple (selectionChange)="initFilter($event,'book')">
        <mat-form-field class="search-input">
            <mat-icon matPrefix>search</mat-icon>
            <input [formControl]="booksFilterCtrl" matInput>
        </mat-form-field>
        <mat-option *ngFor="let book of books" [value]="book">{{book.name}}</mat-option>
    </mat-select>
 </mat-form-field>

我正在使用 material 设计和 angular 9

Answer 1

我在评论部分建议你使用一个包来做到这一点，但它仍然是 select 输入 'space' 时的项目。您可以添加：

(keydown)="$event.stopPropagation()"

在输入搜索输入时禁用键盘按键事件。对我给你的包裹很有用：mat-select-filter.

这里是the github thread talking about it。

Angular Material 9：如何修复 mat-select 内的 mat-form-field 中的错误

Angular Material 9 : How to fix a bug in a mat-form-field inside a mat-select

material-design

angular