这是使用 mat-autocomplete 的演示应用程序，我从 stackoverflow 帖子中选择在此处输入链接描述 ，我想显示选项的整个值。当值很长时。我发现了类似的问题，请在此处输入链接描述，但这并没有解决我的问题。我可以滚动并查看值，可以修改 css 样式，以便滚动条正确可见。

看起来滚动条的剩余部分被隐藏了！

我试过了

什么都没有解决！

如果元素完全显示出来会更好。

代码片段 模板.html

打字稿.ts

现在，当值发生更改时，matAutocomplete 正在工作。当用户单击自动完成输入字段中的光标时，我必须限制 matautocomplete 中的过滤操作。对我来说，当用户单击 matInput 字段时，它应该列出带有所选选项而不是过滤值的整个列表。我尝试同时实现 matselect 和 matAutocomplete 的功能。

它应该只过滤，当用户通过输入查询来搜索选项时。当用户单击输入字段时，它不应该进行过滤。

1）当用户在自动完成字段中键入字符串时，它应该搜索或过滤列表。2）它也应该具有mat-select的功能。

提前致谢。

ts 代码片段

html代码片段

我想在每个 mat-option 文本上设置悬停样式，我希望文本显示在 mat-option 之外。为了实现这一点，我应用了非常高值的 z-index，但没有任何改变。我尝试将 z-index 添加到更高的值，但这并没有成功。

我受到以下stackblitz 链接的启发

这是当前的行为

这是我需要的

这是代码片段

模板.html

模板.ts

模板.scss

我有一个自动完成功能，可以与下面组件中的 options 变量一起使用，但我无法让它指向 JSON 对象this.poststhis.posts 中有一个名为 artistName 的字段，我试图将其作为列表返回自动完成。如果我尝试将 this.posts 分配给

这不被允许。我不明白如何从 JSON 响应中获取我的结果以显示在自动完成中。我意识到this.posts 是一个对象，我正在寻找特定的字段artistName，但我想我无法弄清楚如何正确连接它。我很感激任何帮助

样本输入和返回（arti 是类型值）

零件

html

我正在使用此自动完成功能来选择多个用户。

当我选择一个用户时，我使用推送将 ID 存储在一个变量中。此推送将帮助我保留所有选定用户的 ID。

如果您选择一个用户然后想要删除它，推送将包含该用户的 ID :(

有没有一种方法，如果我删除一个用户，该用户 ID 不会出现或从推送提供的数组中删除？

我存储所有 ID 的位置

演示

代码

问题

如您所见，我选择了 3 个用户，然后删除了 1 个。我总共选择了 2 个用户，但在数组中我有 2 个选定用户的 id + 被淘汰用户的 id。不应存在​​此已删除的用户 ID :(

为了在任何表单控件上使用 mat-autocomplete，我们需要将 valueChanges 事件获取到该特定表单控件。我的 formcontrol 存在于 formGroup 中，它再次使用 formArray，如下所示。我需要从 addUserInfoFormGroup 方法获取的“名称”表单控件的 valueChanges 事件。

我正在使用 (this.myForm.get('usersInfo') as FormArray).controls[0].controls.name.valueChanges 来获取 valueChanges 事件，但它不起作用。

我的 ts 文件

我对使用 mat-autocomplete 材料设计的示例有疑问。谷歌提供的示例函数在构建中给出了错误，如图所示。

谷歌示例：https ://material.angular.io/components/autocomplete/overview#setting-separate-control-and-display-values

我正在尝试使用 mat-select-autocomplete，但我在实现时遇到了一些问题。

第一个问题是函数的 (selectionChange) = "getSelectedOptions ($ event)" 事件总是在我每次单击 mat-select-autocomplete 时运行。是否只有当我选择一个选项时才能执行此功能？

第二个问题：有没有办法在点击提交按钮后清除选中的项目？

演示

.html

.ts

有人能帮我吗？谢谢你。

我目前正在使用Angular-QueryBuilder并ng-container使用angular -material 更新模板。

我的要求是options动态加载数据。即在用户开始输入后从服务器加载此字段的数据（我将使用mat-auto-complete而不是mat-select）。在为示例创建 stackblitz 时，我面临一些挑战。（到目前为止：https ://stackblitz.com/edit/angular-8-material-starter-template-lpmxwi ）

如果有人实现了类似的东西或给出了一些方向，那就太好了。

更新：

想强调的是，使用材料自动完成不是问题。为查询构建器组件集成自动完成和动态更新值是问题所在。如果我在初始化后以编程方式更新它，查询生成器不会填充值，如下所示。

当我单击输入元素时，会显示自动完成选项。但是当我动态更改输入元素的值时，不会显示自动完成选项。

当输入值动态更改时，如何使自动完成可见？