angular - mat-autocomplete 仅在搜索文本上显示列表
问题描述
我正在构建一个应用程序,并且我有垫子自动完成功能。我只想在输入文本字段中输入某些文本时显示搜索列表。我尝试了某些方法但没有运气
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Assignee</mat-label>
<input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
解决方案
您必须在 component.ts 中创建函数。然后它可以正常工作。分别按照以下步骤。
HTML 组件
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Assignee</mat-label>
<input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
在构造函数中插入以下代码。
this.filteredOptions = this.myControl?.valueChanges.pipe(
startWith(''),
map(value => this._filter(value))
);
创建一个名为 _filter 的方法来获取所有自动完成值。
_filter(value: any): any[] {
const filterValue = value.toLowerCase();
return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
}
重要 - 确保 this.options 表示所有受让人
推荐阅读
- snowflake-cloud-data-platform - SNOWFLAKE:不明确的列错误使用变量和标识符()来定义查询列
- json - JSON Schema if/then/else 条件行为异常
- keras - Keras Early 停止关注什么
- tensorflow-federated - TFF 加载预训练的 Keras 模型
- symfony - symfony - 我可以使用特征来实例化序列化程序吗
- php - Composer 自动加载器未在 CentOS 7 上注册 Twig
- javascript - UnhandledPromiseRejectionWarning,discord.js javascrpt
- javascript - 在本机反应中使用 FlatList 组件显示多个图像
- pandas - 当你想替换'Ã?'时,pandas 的 str.replace() 函数不起作用 通过另一个字符串,如何解决问题?
- oracle - sqlplus :: ORA-01078: 处理系统参数失败