问题标签 [mat-autocomplete]

这适用于常规 datalist 元素，其中list="target"输入元素上的 可以id="target"在子组件中找到 。我试图找出一种方法来使用材料自动完成组件来做到这一点。

使用常规 datalist 元素

父组件.html

child.component.html

我整天都在尝试实现此功能，但通常会遇到以下两个错误之一：

或者

使用 Mat-Form-Field 和 Mat-Autocomplete

mat-parent.component.html

mat-child.component.html

现在我正在开发一个 Angular 项目，在这个项目中有一个包含 2 个mat-autocomplete组件的页面，一个用于选择国家，另一个用于选择州。状态一可以正常工作，一切都停留在预期的地方，如下所示：

检查元素会显示有意义的属性。对于div类名cdk-overlay-pane（图中突出显示），widthis350px和topasleft将动态变化，使其始终显示在相关input元素的正上方或下方。

这是相关的 HTML 代码：

然而，当谈到mat-autocompletefor 国家时，事情变得很奇怪。此下拉菜单将始终显示在窗口（浏览器）的左上角。

当我检查元素时width，top和left的属性cdk-overlay-pane总是设置为0px.

但是，我无法找到国家和州之间的实际区别，除了在国家/地区中说“国家”的所有内容都替换为“国家”。这是HTML代码：

老实说，我不知道为什么这个国家不能正常工作。一切似乎都很好，但最终结果却并非如此。

这是此项目中使用的组件和模块的版本号，以防有人想查看。

任何帮助表示赞赏。

我通过参考官方角度材料示例https://material.angular.io/components/chips/overview#chip-input和https://stackblitz.com/angular/arjnbxmepgn?file=src%2Fapp%mat-chip-list一起使用2Fchips-autocomplete-example.html。上面示例中显示的相同模板在这里 -mat-autocomplete

它工作正常，除了以下问题 -

一旦用户关注输入，MatAutoComplete面板就会打开并显示建议。如果用户输入建议中不存在的文本并按下“ENTER”键，则输入的文本在芯片中可见并打开MatAutoComplate面板。MatAutoComplete在这种情况下，我想停止面板的打开。如果用户输入未知文本[即建议中以外的文本]，我不想打开建议面板。在https://stackblitz.com/angular/arjnbxmepgn?file=src%2Fapp%2Fchips-autocomplete-example.html中可以看到相同的情况。

如果用户从建议中选择一个选项并按下“ENTER”键，则MatAutoComplete面板不会打开。当用户在输入中输入未知文本并按下“ENTER”键时，这就是我想要的。

任何帮助将不胜感激。

实际上，“return this.createDialogService.accountOptions”语句是在“accountSearch(value)”方法中的上一行完成订阅部分之前执行的。这就是为什么显示之前的数据。

我的 HTML

我正在开发一个 Angular 应用程序。我有一个 stackblitz 演示，它显示了一个启用了多项选择的 matautocomplete，但是在我的应用程序中，我有一组 matautocomplete，我希望从一个元素中选择一个选项，以免干扰另一个元素。这个怎么做？

例如，如果我在第一个元素中选择 option1，我会看到 option1 在其他元素中也被选中。我不希望这种情况发生，而是希望它们彼此独立。

这是stackblitz演示链接

我已经在我的代码中实现了 mat-autocomplete（如在链接中实现的那样），它运行良好，没有任何问题。

但我需要将 [formcontrol] 更改为 formcontrolname，以便输入框与从 DB 填充的值绑定，并在保存时保存回 DB。

当我使用 formcontrolname 时，一切正常，除了搜索/过滤值。有人可以帮助我在使用 formcontrolname 时解决搜索/过滤问题吗？

我正在使用 mat-autocomplete，因为当我选择下拉菜单并滚动主栏时，该下拉框不会随自动完成输入字段一起移动。 在此处输入图像描述

代码：

我在弹出窗口中使用垫表。在 mat-table 内会有 mat-autocomplete 的行。问题是我需要动态添加行。我正在使用一个formGroup，里面有formArray。

这将是 FormGroup 的模型

}

首先网格将是空的，但是当我单击一个按钮时，它会在 formArray （这是网格的数据源）内插入一个 formGroup。但是当这种情况发生时，用户界面完全冻结，我无能为力。

这是HTML文件代码

我能够找到问题所在。这是因为我使用 mat-auto 完成的参考。当我从输入标记中删除 matAutoComplete 引用或更改 formControlName 时，它​​可以工作。

这是 TS 代码：

如果我遗漏了什么，请告诉我，在此先感谢

matAutocomplete当我通过“向下箭头”向下滚动选项时，选项不会突出显示。换句话说，它不指示我当前在悬停时选择了哪个选项。它以前工作过。这是因为角材料的任何版本变化吗？（当前角材料版本是 9）。注意：此问题存在于所有应用程序matAutocomplete中matSelect如果有人可以帮助我解决此问题，那就太好了！

如stackblitz所示，当 stackblitz 示例中显示有多个自动完成控件时，除了 Page Scroll 上的第一个自动完成控件（城市）之外，我在关闭自动完成控件时遇到了问题。

重现步骤：

1. 首先单击 -城市自动完成控件并让它保持扩展。

2. 尝试进行页面级滚动，然后City Autocomplete 控件折叠。

3. 现在点击第二个 -州/国家自动完成控件并让它保持扩展。

4. 尝试进行页面级滚动并查看州/国家/地区自动完成控件没有崩溃。

预期行为：州/国家/地区自动完成控件应折叠，类似于页面滚动上的城市自动完成控件。

实际行为：州/国家自动完成控件不会在页面滚动时折叠。