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

【问题标题】：Angular Material 9 : How to fix a bug in a mat-form-field inside a mat-selectAngular Material 9：如何修复 mat-select 内的 mat-form-field 中的错误
【发布时间】：2021-02-05 23:13:53
【问题描述】：

我想过滤 mat-select 中的一些对象，但是一旦我在搜索框中点击空格键，第一个元素就会被选中！知道如何解决这个问题吗？这是 mat-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>

我正在使用材料设计和角度 9

【问题讨论】：

请提供完整的复制品，以便我们了解发生了什么。但我建议你不要重新发明轮子，找一个适合你需要的包，比如这个：npmjs.com/package/mat-select-filter
似乎 mat-select-filter 和我的帖子有同样的问题！空格键不起作用，默认检查列表的第一个值！
在下面查看我的答案，它可以修复它，并且也可以使用您自己的代码。

标签： angular material-design

【解决方案1】：

我在评论部分建议您使用包来执行此操作，但在键入“空格”时它仍会选择该项目。您可以添加：

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

在输入搜索输入时禁用键盘按键事件。我给你的包裹就像一个魅力：mat-select-filter。

这里是the github thread talking about it。

【讨论】：

我的解决方案也很有魅力，我不需要额外的包 :) 谢谢！
即使使用 mat-select-filter 包我也有一个奇怪的问题！当我搜索列表中未找到的元素时，我对输入进行模糊处理，无法打开选择，我必须重新加载页面！你有这个吗？？
@Kivo 我想这是因为关闭选择窗口时没有清除搜索输入。如果我记得有一个事件，请在此时清空您的输入，应该没问题。