问题标签 [mat-autocomplete]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
2150 浏览

angular - How to set filter with mat auto select in angular template driven form

How to set filter with mat auto select in angular template driven form.

Please see stackblitz example: click here

0 投票
2 回答
1784 浏览

angular - 请参阅使用 ngFor 循环动态生成的自动完成输入

我正在设置一个发票 Angular 页面,其中行是动态添加的,每一行都应该有一个自己的自动完成输入和其他不同的输入。如何在我的组件中独立地引用每个自动完成输入,这样我就可以在我的 displayWith 函数中使用正确的输入?

我的问题与类似,但我在那里找不到正确的答案:(

HTML

TS:

预期结果:在 displayFnArticle 函数中,我可以访问当前行的自动完成输入

实际结果:我刚刚访问了相同的第一个自动完成输入 id,这可能导致以下功能障碍

0 投票
0 回答
80 浏览

angular - 使用多个 mat-autocomplete 时无法获取值

在使用 Rest API 在 Angular 6 和 ASP .Net MVC 中创建一个组件时,我遇到了一个问题。我有一个表格结构的表格,在最后一列有一个“添加新”按钮。如果我单击该按钮,那么我将使用 ngFor 创建另一行。我的问题是我无法保留在自动完成器中选择的那些值(产品名称)。如果有人有简单的解决方案,请告诉我。提前致谢。问候。

0 投票
1 回答
164 浏览

angular - 选择项目时,Mat-autocomplete 保留最近的选项

我正在使用mat-autocomplte&displayFn管道async

现在我的问题是,当我从列表中选择选项时,valueChange将调用&因为我正在使用 displayFn 值将是对象,因此else将执行块returns of(null)

我想要做的是在焦点/点击自动完成时显示以前返回/现有的列表。

因此,当我选择选项时,列表不应该变得清晰。

我不知道该怎么做。谁能指出我正确的方向?

0 投票
0 回答
93 浏览

css - 有没有办法设置或覆盖 AUTOCOMPLETE_OPTION_HEIGHT

我正在尝试将 mat-autocomplete 与自定义项目高度一起使用。我可以使用以下 css 调整选项高度:

但是,这会导致滚动中断,当使用向下箭头时,面板滚动超出必要。

文档引用了一个常量:AUTOCOMPLETE_OPTION_HEIGHT设置为 48px。有没有办法覆盖这个常量?我试图将常量值作为提供者提供:

这似乎没有任何效果。

如何调整选项高度以使面板正确滚动?

谢谢!

0 投票
2 回答
2976 浏览

javascript - mat-autocomplete:选择后需要重置选项列表

我有一个 mat-autocomplete 组件,其中包含连接选项,以便在用户键入时从服务调用中填充(部分搜索):

在我的 TS 代码中,当用户选择一个值时,我在处理结束时将选项数组设置为一个空数组:

这在调用代码时起作用,并且 this.options 设置为空数组。问题是当用户尝试在字段中键入另一个值时,之前的选项仍然存在。如果他们键入,选项将被清除,并填充基于部分搜索的新选项,所以我认为这是一个渲染问题,但我对 Angular Material 有点陌生,所以我不确定这是否是错误的方法,或者我错过了一步。

谢谢!

0 投票
1 回答
108 浏览

angular - 从 mat-autocomplete 获取源 FormControl

我有一个动态 matInput 对象表,如下所示:

每个 matInput 都有一个对应的 mat-autocomplete,例如:

如您所见,在 optionSelected 方法中,我传入了 $event.source。我的真正目标是获取触发事件的 FormControl,这样我就可以在同一行中设置其他值。问题是 $event.source 是 MatAutoComplete 类型,我不确定如何从中获取(反应性)FormControl。

编辑:

堆栈闪电战: https ://stackblitz.com/edit/angular-mzryga ?file=src%2Fapp%2Fapp.component.ts

0 投票
2 回答
1657 浏览

css - 角度材料自动完成结果列表显示在模态后面?

我有modal我有angular-material autocomplete。它的html是这样的

但这里的问题是我的autocomplete结果列表显示在这样的模态后面

在此处输入图像描述

您可以在屏幕叠加层的左上方看到一个列表显示。基本上这个列表是material-autcomplete建议列表。我已经尝试过这些 css 来z-index改变autocomplete

但是没有一个解决方案有效。我没有使用bootstrap模式。我正在使用npm simple-modal. 我该如何解决这个问题?

0 投票
2 回答
33 浏览

angular - 从文本框中的自动完成建议中检索选定的选项

我有一个启用了自动完成功能的文本框。现在,我想从自动完成建议中检索文本框中的选定选项并将其推送到另一个文本框中。如何在打字稿中对其进行编码?有什么方法吗?

以下是具有自动完成建议的文本框代码:

0 投票
1 回答
51 浏览

html - 自动完成过滤功能仅在输入内容后才有效

当用户触摸输入字段时,应该会出现下拉值,但我的下拉菜单仅在我在输入中键入内容后才会出现。

这是我的 HTML 代码:

这是我的类型脚本函数: