问题标签 [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 回答
721 浏览

angular - 如何正确使用 mat-autocomplete 和远程 graphQL 数据?

我在这里使用 angular 6 和 angular 材料,我正在尝试构建一个使用 graphQL 和 Apollo 的搜索组件。

好吧,该组件有效,但我想解决这些问题:

  1. 我想添加 debounceTime,但找不到确切的添加位置。
  2. 我希望不会在 graphQL 查询中搜索空值
  3. 我不使用异步过滤器进行垫子自动完成,因为我将结果放在数组中。这是正确的方法吗?

我与 graphQL 服务器交互的产品服务:

我的搜索组件 html 与mat-autocomplete组件:

最后是我的搜索组件(Typescript 文件):

据我所知,这些代码行可以工作,但它可能不是最优化的编写方式。因此,我们将不胜感激有关上述问题的任何信息。

0 投票
1 回答
473 浏览

angular - Angular Material Autocomplete 设置滚动顶部

打开面板时,<mat-Autocomplete>我想将 scrollTop 设置为模型中已经初始化的值。因此我使用 to_setScrollTop方法。问题是,当第一次打开带有选项的面板时,下面的代码不起作用,但只有在我再次单击输入字段之后。

.ts 看起来像这样:

这是 HTML 片段:

我使用两个不同输入的原因是我使用另一个自定义指令来格式化输入。

0 投票
1 回答
4921 浏览

angular - Angular mat-autocomplete - 动态添加/删除项目问题

我正在尝试创建一个具有动态数量的mat-autocomplete字段的简单表单。但是,在某些情况下,输入的显示值会丢失

组件的脚本

组件视图

我做了一个 StackBlitz 来展示这个问题。如果你:

  1. 在第二个自动完成字段中选择一个项目(例如Item 2
  2. 从第一个自动完成字段中删除项目(使用字段x末尾的)
  3. 点击Add Item添加另一个

然后,第一个自动完成字段将显示一个空值,而不是保留原来的值。

谁能帮我弄清楚为什么价值会丢失?这是处理动态数量的自动完成字段的错误方法吗?

0 投票
1 回答
2153 浏览

angular - mat-autocomplete 没有正确绑定

我正在尝试使用两个 matInput 字段,每个字段都与单独的 mat-autocomplete 面板绑定。按照此处的步骤,我可以让一个正常工作,但是我在使用两个输入字段和自动完成面板时遇到了困难。

这是我的html:

这是我的组件:

将每个文本输入字段链接到相应的面板时,我使用 [matAutocomplete]="first" 将第一个面板链接到第一个文本输入。根据 Angular Material 文档,我希望能够使用 [matAutocomplete]="second" 将第二个文本输入字段链接到第二个自动完成面板。

现在我的自动完成面板显示在同一个位置,而不是在相应的文本字段下。

有没有人看到这个或知道我做错了什么?

0 投票
3 回答
2866 浏览

angular - mat autocomplete - 如何设置未找到的选项

如何为 mat mat-autocomplete 设置选项未找到。

下面是我的代码:

AngularJS 中的等效元素是

mat-autocomplete 中的 AngularJS md-not-found 等效项是什么

0 投票
1 回答
1544 浏览

angular - 绑定在 mat-table 内的 mat-autocomplet 存在问题 - Angular 5

我在 mat-table 中绑定了 mat-autocomplete 控件(几乎 30k 条记录)。在这里,用户可以在自动完成中更改值并保存 mat - 表。

如果用户在 mat-table 的多行中选择自动完成控制中的任何不同值并保存。

如果我们重新绑定 mat-table,所有 mat-autocomplete 选定的项目都将显示 mat-autocomplete 的最后一个值。

但这里数据源对象已正确更新。

在 mat-autocomplete 中更新和保存值

刷新 Mat-table 设置最后一个值后。[这里的数据源很好,json对象具有正确的值]

html代码

垫表放置在容器中,并放置在选项卡控件中,单击选项卡页时,我们正在加载和绑定垫表

0 投票
1 回答
6887 浏览

angular - Mat-自动完成多个字段

我正在使用 Mat-Autocomplete,但由于某种原因,它仅在我使用 1 个字段时才有效,当我添加另一个第二个字段时,会发生一些奇怪的事情。

在字段 1 和字段 2 中,我在下拉列表中获得相同的选项,这些选项是仅在我编辑字段 2 时才可用的选项。

是否有可能拥有超过 1 个字段,我从未见过任何关于此问题的示例。

现场1

FIELD2

0 投票
0 回答
391 浏览

angular - 基于角度 6 中选定的 mat-autocomplete 值的搜索表

我的页面中有两个 mat-autocomplete 视图。为此,我正在使用这个有角度的材料示例。 https://stackblitz.com/angular/lnnnrgqxjmd?file=app%2Fautocomplete-overview-example.ts 我正在使用这个相同的例子。在同一页面中,我有一个 table.for,我在从 API 获取数据后显示数据。

在一个自动完成视图中,我正在填充所有名称。在第二个自动完成视图中,我正在填充所有状态。

我想根据从自动完成中选择的名称和状态来搜索这个表。

谁能帮助我如何做到这一点。

0 投票
2 回答
1540 浏览

angular - 有没有办法使用角度材料自动完成来自动完成具有类型编号的对象数组的对象?

假设对象数组,

在这里可以看到数组中每个元素的id都是一个数字。当对象数组采用给定格式时,角度自动完成组件不起作用。任何解决方法?如何使用书的id自动完成?

0 投票
2 回答
2395 浏览

angular - Angular Reactive Form patchValue() 不填充连接到 mat-autocomplete 的输入

我正在尝试重新填充使用 mat-autocomplete 的输入。但是,每当我发送带有this.optionForm.patchValue({selectedOption: 'my value'})结果的值时,GUI 中都不会显示。如果我console.log()可以清楚地看到该值已设置。我不确定这个问题是否与我有时将一个对象设置到字段中而其他时间只设置一个字符串这一事实有关?但我希望能够用结果重新填充输入并适当地显示它。无论我如何尝试,我似乎都无法显示结果。

下面是我的组件,它只包含有问题的输入,而我的 Observable 正在为mat-autocomplete. 这些在第一次使用表单时工作正常。

任何帮助,将不胜感激!