Angular Query-builder:如何懒惰地加载材料自动完成选项(可能值)的数据
Angular Query-builder是一个用于构建查询条件的Angular组件。它可以帮助开发人员在前端界面上创建复杂的查询条件，并将其转换为后端可以理解的查询语句。
在Angular Query-builder中，懒惰地加载材料自动完成选项的数据是通过使用Angular的异步数据加载机制来实现的。以下是一种可能的实现方法：
- 创建一个服务来获取自动完成选项的数据。这个服务可以使用HttpClient模块从后端API获取数据，或者从其他数据源获取数据。
- 在Angular Query-builder组件中，使用Angular的内置指令（如ngIf和ngFor）来控制自动完成选项的显示和隐藏。当用户输入查询条件时，通过ngIf指令判断是否需要显示自动完成选项。
- 在输入框中，使用Angular的内置指令（如ngModel）来绑定用户输入的值。当用户输入值发生变化时，可以通过订阅ngModel的valueChanges事件来触发加载自动完成选项的数据。
- 在订阅事件的回调函数中，调用之前创建的服务来获取自动完成选项的数据。可以使用RxJS的操作符（如debounceTime和switchMap）来控制数据的加载时机和避免重复请求。
- 将获取到的自动完成选项数据绑定到自动完成选项的模板中，以便用户可以选择合适的选项。
总结起来，懒惰地加载材料自动完成选项的数据可以通过使用Angular的异步数据加载机制来实现。通过创建一个服务来获取数据，并在用户输入值发生变化时动态加载数据，可以实现在Angular Query-builder中懒惰地加载自动完成选项的功能。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云前端开发：https://cloud.tencent.com/solution/frontend
- 腾讯云后端开发：https://cloud.tencent.com/solution/backend
- 腾讯云数据库：https://cloud.tencent.com/product/cdb
- 腾讯云服务器运维：https://cloud.tencent.com/product/cvm
- 腾讯云云原生：https://cloud.tencent.com/solution/cloud-native
- 腾讯云网络通信：https://cloud.tencent.com/product/vpc
- 腾讯云网络安全：https://cloud.tencent.com/product/ddos
- 腾讯云音视频：https://cloud.tencent.com/product/tcav
- 腾讯云多媒体处理：https://cloud.tencent.com/product/mps
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobdev
- 腾讯云存储：https://cloud.tencent.com/product/cos
- 腾讯云区块链：https://cloud.tencent.com/product/baas
- 腾讯云元宇宙：https://cloud.tencent.com/solution/metaverse
相关·内容
我目前正在使用Angular-QueryBuilder，并使用angular-material与ng-container一起更新模板。 <!options动态加载数据。例如，在用户开始键入后，从服务器加载此字段的数据(我将使用mat-auto-complete而不是mat-select)。在为示例创建stackblitz时，我面临着一些挑战。(目前：https://stackblitz.com/edit/angu
浏览 8提问于2020-03-26得票数 1
我正在尝试让材料自动完成自动选择我最初加载的选项，但遇到了一些问题。我是个新手，所以可能做了一些根本错误的事情，但我的代码基本上就是这样做的。name]}} />} 这些选项是在输入时异步
浏览 25提问于2021-07-10得票数 0
编辑：有一些针对模板驱动表单的变通方法(见下面的答案)。(我正在寻找反应形式的解决方案)。
options: User[] = [ {name: 'Aretha Franklin'},{name: 'A
浏览 0提问于2019-03-26得票数 2
回答已采纳
单个对象如下所示：我在md中使用的-自动完成： <input type="如果我在输入中通过了整个驱动程序，比如[value]="driver"，我看到[object Object]和表单提交给我完整的对象。但是当我和[value]="driver.DRIVER_NAME"一起去的时候，我可以
浏览 1提问于2017-08-07得票数 2
回答已采纳
2回答
我从一个简单的API中得到了一个json响应，它包含数千个图像urls，大小约为1.7MB。我没有使用任何JS框架/库。那么，在DOM中加载图像的有效方式是什么呢？
浏览 7提问于2021-04-14得票数 0
回答已采纳
使用Angular 6和Angular材料，我正在尝试制作2个具有不同数据源的自动完成芯片列表-我在这里扩展了最后一个示例：
然而，最后一个Mat-Chip列表似乎“覆盖”了前一个列表，即使它们被映射到不同的对象和标签等如果您删除第二个Mat-Chip-List，第一个Mat-Chip-List将正确加载-如果您更改任一Map-Chip-List的声明顺序，第二个Mat-Chip-List将始终正确加载</e
浏览 0提问于2018-07-21得票数 2
回答已采纳
我需要一个输入栏，在右边有一个箭头，这样当我按下箭头时，我就有了一个选择标签的行为(一个选项的下拉列表)。我想知道是否有可能在HTML/Angular 6中做到这一点……我找到了datalist的解决方案，但它实际上并不是我正在寻找的结果，因为在这个解决方案中，如果我在输入中输入一些值，然后单击箭头，任何内容都会显示，因为datalist会根据输入值过滤要显示的内容。
浏览 22提问于2018-06-22得票数 0
0回答
我正在使用Angular 5的材料组件，并且有一个表单控件，它是由服务调用提供动力的自动完成控件。不幸的是，在服务调用完成之前，自动完成不会显示，而且由于我们目前遇到的一些网络延迟问题，大多数用户在服务调用完成之前就已经完成了键入。我想要显示某种可视的指示器，表明自动完成正在加载，但不知道<e
浏览 10提问于2018-07-20得票数 3
回答已采纳
我是新的反应和材料用户界面和努力加载自动完成组件选项动态。
警告:组件正在将不受控制的输入更改为被控制。这很可能</e
浏览 0提问于2021-08-13得票数 2
我有一个下拉框，上面有大学名字，有9000种选项可供选择。我无法使用Webforms中的下拉字段。
在Drupal 6的文本字段中有使用自动完成的方法吗？
浏览 0提问于2011-09-14得票数 1
回答已采纳
1回答
假设我有一个服务，它提供了希望作为选项加载到<select>元素中的对象列表。 // etc...我希望加载select选项列表，其中包含来自myReferenceList.getCachedList()的数据，显示的文本来自ReferenceName，我想将这个选择项连接到$scope.dataRow.Ref
浏览 2提问于2015-04-10得票数 0
我有一个带有DataSource集合的角度材质表，并且正在使用Material Table Filter来过滤数据。代替常规输入，我有两个自动完成的材料，它们从表中的唯一值的来源填充他们的选项。就其自身而言，这些自动完成功能运行良好-如果您在其中搜索一个名称，则选项会向下过滤到表中可用的内容。问题出现在多个自动
浏览 28提问于2021-08-19得票数 0
回答已采纳
2回答
JS到Dart转换
、、、、
这是一个由两个部分组成的问题。我并不懒惰，只是根本上没有足够流利的JS语言来转换整个库，同时引用。文档解释了如何访问JS全局对象，如下面的片段所示，但是如果我没有弄错的话，这不是我想要的。var angular = context(['angular']);
var myapp = angular.module('myApp', ['ngResource','ngRoute'
浏览 4提问于2014-03-02得票数 1
回答已采纳
我一直在尝试使用来自角Material2的自动完成组件。但我有点怀疑。
样本：
浏览 0提问于2017-03-18得票数 0
1回答
我目前正在创建一个角度6的仪表板，材料2。问题在于两个mat-select元素，第二个元素的选项取决于第一个select的值。如果是select1.value === a，那么select2将有a_1、a_2等选项。我遇到的问题是当我使用mat-select函数更新FormControl.setValue(obj)值时，我可以很好地更新所选的select1值，但是se
浏览 0提问于2018-10-18得票数 2
回答已采纳
3回答
所以我遵循了Angular材料自动完成的Angular文档，但两天来一直在为从自动完成中获取选择的值而斗争。基本上我想要的是自动完成显示人类的名字和姓氏，但选项的值必须是整个人类对象。对此的任何解决方案可能都可以。
浏览 0提问于2018-05-24得票数 2
1回答
我有一个在加载时通过ajax获取数据的指令。但是，在控制器中发布一些数据的事件之后，指令应该使用新的ajax数据重新编译，以便反映更改。你能帮帮我吗。我在指令中有一个编译函数，它获取数据并将其放入HTML文件中，然后生成标记。
然后，我在控制器中有一个保存注释的函数，它保存一个新的注释，因此指令获得了新的数据。class="no-comments comment"
浏览 0提问于2014-05-29得票数 1
我正在与角材料自动完成在一个项目中获得一个网站的列表，这可能是相当大(数千行)。我知道startWith会触发100%记录的初始加载(未过滤)，我希望一旦我找到更好的方法就删除startWith。 问题是:这个表单有很多筛选器，除非使用筛选器，否则我不想下载数据。我希望等到用户真正聚焦或触摸/单击输入时再下载数据(无论是否经过过滤)。用angular做这件事的正确方法是什
浏览 19提问于2021-07-29得票数 0
我成功地为我的角度材料设计表应用了排序机制，但我缺少的是，当我加载页面时，该表会自动排序。当我点击我想要排序的列的列标题，而不是在启动时，它就起作用了。我能找到的唯一解决方案是(matSortChange)，但我不想定义排序函数，因为显然angular知道排序函数，但在创建表时不会应用它。我可能面临的一个问题是，因为我在ngOnInit()函数中添加数据，所以创建
浏览 0提问于2021-04-08得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
