问题标签 [mat-autocomplete]

我正在运行 angular app ，对此我有自动完成功能，我想将水平滚动添加到 mat-option，我尝试应用 css 样式

两次尝试都失败了！！

我正在运行角度应用程序，我有自动完成字段，我想调整它的位置。我参考了官方文档在方法下在此处输入链接描述，updatePosition - 更新自动完成建议面板的位置以确保它适合视口内的所有选项。

我不确定如何使用

这是我的 template.html

如下图所示，我希望垫子选项向左移动一点

如图所示，突出显示的类总是将样式应用于 left:779px 但我想保持 atv 775px

我已经成功实现了 mat-autocomplete，如果从自动完成下拉菜单中选择它，它工作正常。当我输入一些文本并导航到其他字段而不选择下面的自动完成字段时，我遇到了问题。它保留在自动完成字段中键入的值。

我已使用以下方法来解决此问题-

1. MatAutocompleteTrigger - 下面的代码我在 ts 文件中使用过 -

   首先，我无法将它保存在任何角度的生命周期钩子中。此触发器在角度生命周期挂钩期间不会被初始化，但稍后它会从 mat-autocomplete 接收任何值。因此，只要我在字段中输入文本，它就会清除值（保留下面的自动完成列表；看起来不太好）

   2.在filterOptions上使用了observalble（在我的自动完成字段上可以观察）-我使用了下面的代码-

   /li>

使用模板代码 -

如果我们没有从自动完成中选择任何内容，我只需要清除该字段，它也应该从表单中清除字段值。

例如我有标记：

选择选项时，它调用该setProject()函数，该功能设置了以后用于我的加载按钮的选定项目。但是，由于它当前起作用，将值绑定到[value]="project.ProjNum"将调用带有项目编号的 setProject。虽然将我的值设置为[value]="project"（这会将我selectedProject的值设置为项目对象）似乎很直观，但它现在将显示[object Object]在我的输入字段中。

如何修改它，以便我可以直接引用project我的选项之外的对象，而不仅仅是选择和显示的属性？

注意：我知道我可以使用 ProjNum 过滤我的项目列表以找到正确的项目，然后设置 my selectedProject，但是当我已经拥有我想要的对象时，我宁愿不浪费资源循环浏览列表。

我有一个带有自动完成功能的输入表单。它根据用户类型过滤选项。问题是，当单击一个选项时，该字段变为空白，而不是填充用户的选择。

这是我的 HTML：

这是我的打字稿文件：

我不确定出了什么问题。我查看了自动完成的角度材料文档，据我所知，我尽可能地遵循代码示例，所以这里的代码肯定还有其他问题。

我正在尝试使用带有自动完成功能的输入来执行以下表单，但我希望用户只能选择自动完成列表中的项目，但可以搜索要选择的项目：

问题是，当自动完成过滤时，并不总是触发点击事件（在 mat-option 上）并且总是触发 change 事件（在输入上）。

有什么想法吗？有没有办法让点击优先于更改？

提前致谢

我正在使用带有 mat-autocomplete 的 Angular CDK 的覆盖模块。

场景： 有一个带有cdk-virtual-scroll的mat-autocomplete输入框，下面有两个按钮。使用下拉列表中的值之一预先选择了输入框。

问题： 现在，如果我们从 mat-autocomplete 输入中选择整个文本/双击默认选定的文本，然后点击正下方以再次取消选择该文本（在该按钮上/上方），我将无法单击这些按钮。

调试时分析： 如果我们点击输入，它会打开透明的 cdk-overlay 层，但没有结果。供参考，请参阅随附的 img，以了解我已将叠加背景设置为黄色，因为此叠加我们无法单击按钮。

覆盖在垫子自动完成上

我想在我的角度项目中实现 matAutoComplete 我浏览了一些参考
https://stackblitz.com/edit/mat-chips-angularmaterial?file=package.json

但我没有得到自动完成的任何选项。

//component.html

//组件.ts

即使我已经在 app.module.ts 中导入了 MatAutocompleteModule 包

我在我的角度项目中使用 mat autocomplete https://material.angular.io/components/autocomplete/api 。在加载包含 25k 个项目的大数据时。性能变低。搜索和建议自动完成太慢了。如何提高这个性能？

我不知道如何在stackoverflow中运行角度应用程序的代码片段，

我正在使用 mat-autocomplete ，我选择了 128 个字符长的名称，光标附加在所选字符串的末尾而不是开头。有没有人在使用 mat-autocomplete 时观察到这一点？

这是示例，在指向代码的 stackblitz 链接链接中，我只是为加利福尼亚添加了字母“v”，当我选择“加利福尼亚”时，我看到光标位于末尾，而我希望光标位于字符串的开头。

在 app > app.component.ts 下的代码链接中，检查状态变量，将 name 属性更改为 128 字符长的字符串，然后从下拉选择选项中，您将看到光标出现在字符串末尾。