Angular材质如何动态创建添加多个相同形式的自动补全
Angular材质是Angular框架中的一个重要概念，它用于定义和控制组件的外观和交互行为。动态创建和添加多个相同形式的自动补全可以通过以下步骤实现：
- 创建一个Angular组件，用于显示自动补全的内容。该组件可以包含一个输入框和一个下拉列表，用于展示匹配的选项。
- 在需要使用自动补全的组件中，引入并使用上述自动补全组件。可以通过在模板中添加一个输入框，并使用Angular的双向绑定将输入框的值与组件中的属性进行绑定。
- 在自动补全组件中，使用Angular的@Input装饰器定义一个输入属性，用于接收需要匹配的选项列表。这个列表可以是一个数组，每个元素代表一个选项。
- 在自动补全组件中，使用Angular的RxJS库中的Observable对象和管道操作符，监听输入框的值变化，并根据输入的值过滤选项列表，得到匹配的选项。
- 在自动补全组件中，使用Angular的*ngFor指令，遍历匹配的选项列表，并将每个选项显示在下拉列表中。
- 在自动补全组件中，使用Angular的@Output装饰器定义一个输出属性，用于向父组件发送选中的选项。可以通过在下拉列表中的每个选项上添加点击事件，当用户选择一个选项时，触发该事件，并将选项作为参数传递给父组件。
- 在父组件中，使用自动补全组件，并将需要匹配的选项列表传递给自动补全组件的输入属性。
- 在父组件中，监听自动补全组件的输出属性，当用户选择一个选项时，执行相应的逻辑操作。
总结起来，动态创建和添加多个相同形式的自动补全可以通过创建一个自动补全组件，使用输入属性接收选项列表，使用输出属性发送选中的选项，然后在需要使用自动补全的组件中引入并使用该自动补全组件。这样可以实现在不同的组件中动态创建和添加多个相同形式的自动补全功能。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台（IoT Hub）：https://cloud.tencent.com/product/iothub
- 腾讯云移动推送（TPNS）：https://cloud.tencent.com/product/tpns
相关·内容
1回答
我有个问题。我需要使用angular材质创建一个动态多级菜单，数据源如下所示 [
{
"name": "Frontend",
"children": [
{
"name": "HTML"
},
{
"name": "Angular"
},
{
浏览 29提问于2020-03-25得票数 0
我正在为此构建一个angular5应用程序，我需要angular材质，哪个版本的angular材质与angular 5应用程序兼容，以及如何安装它。
浏览 2提问于2018-05-30得票数 9
回答已采纳
我并不期望VSCode能完美地适用于其他编程语言。但它似乎总是对typescript有很大的支持。但对我来说效果不是很好。我不知道是配置错误还是遗漏了什么。
我遇到的最大问题是自动导入。例如，当我尝试导入一个angular模块时，除非我在顶部使用import {} from '@angular/router'手动导入一次，否则它不会工作。然后，VSCode查找路由器包中的所有模块。应该是这样的吗？
另一个问题是自动补全建议非常慢。当我输入VSCode时，它只是冻结了一到两秒钟，然后它显示了自动补全建议。
这是在我的tsconfig.json中，如果这是任何帮助。
{
浏览 5提问于2020-07-11得票数 0
1回答
我使用的是angular材质，并且我需要在$mdDialog中动态设置模板。我使用resolve从服务器下载模板，这是我能够做到的，但我希望将下载的模板动态设置为$mdDialog模板。这个是可能的吗？
下面是我的代码：
$mdDialog.show({
controller: 'TaskShowController',
// template: module.template,(not working)
parent: angular.element(document.body),
浏览 2提问于2015-07-31得票数 1
我想写一个ModelViewer在我的场景中加载许多模型。那么，如何在运行时创建GLMaterialLibrary并将其分配给RunTime中的FreeForms对象呢？我想知道怎样才能找到子模型纹理的名称。TanX请求帮助。
浏览 5提问于2014-08-15得票数 2
2回答
我的场景:我的MVC控制器返回JSON数据，它是字符串数组
我尝试了所有可能的解决方案，比如twitter bootstrap typeahed for angular，但都不起作用。我阅读文档，但对我来说，这也是一项艰巨的工作。有人能解释一下如何一步一步地实现自动补全吗？我已经使用jQuery实现了它，但我不想使用jQuery，因为Angular不知道jQuery的DOM更新。
浏览 0提问于2015-12-29得票数 0
将图像作为材质添加到预定义的3d对象中，如Swift中的Cube，对我来说效果很好。现在，我尝试将图像作为材质添加到运行时动态创建的多边形中。
我希望这样的东西能行得通：
let source = SCNGeometrySource(vertices: vertices)
var data = [Int32]()
for (index, value) in vertices.enumerated() {
data.append(Int32(index))
}
data.insert(Int32(vertices.count), at: 0)
let indexData = Data
浏览 0提问于2018-01-24得票数 0
当前的角度ag-grid工具提示示例不起作用。 https://stackblitz.com/edit/angular-ag-grid-tooltip-example-fb7nko Javascript/typescript。运行Angular 8和最新的ag-grid版本。我试着按照柱塞的例子到一个T，但是没有成功。我现在正在尝试这个。我有一个名为CustomTooltipComponent的组件，它在从我的.ts文件接收{{data}}的模板中有一个动态mat-tooltip。工具提示没有显示，所以我放了一个跨度，它显示了，但它以纯文本显示。创建的组件也已添加到我的入口和声明模块中。 &
浏览 43提问于2019-08-29得票数 4
回答已采纳
1回答
你能告诉我如何在angular js中实现jquery自动补全吗?我正在尝试在angular js 中实现这种类型的自动补全。
或者这个
所以我做了一个自定义指令.but，你能告诉我我哪里做错了吗？
var app=angular.module("ionicApp",['ionic']);
app.directive('autosemple',function(){
return{
restrict:'A',
scope:{
},
link:functi
浏览 1提问于2015-05-15得票数 0
2回答
我在我的angular 10项目中使用了angular材质10.2.5。我通过添加下面这一行来包含主题
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
在我的style.css中，我创建了一个组件，并使用了一个原色的材质按钮，但我的按钮颜色并未应用。
<button mat-button color="primary">Toogle</button>
按钮颜色必须为蓝色
有什么想法吗？
浏览 0提问于2020-10-27得票数 0
1回答
如何创建角度材质组件形状的主题？
、、、、
有没有办法在angular材质中创建组件形状的主题？我知道material设计有一个形状概念，允许你为所有的小/中/大组件创建更多的圆角，较少的圆角，甚至是切角。有没有办法在angular材质中实现这一点？
如果不是，那么在angular材质中全局定制组件的最佳方式是什么？假设我想去掉所有<mat-button>上的圆角？
浏览 17提问于2019-07-15得票数 5
回答已采纳
我想在我的垫多选择下拉列表中添加搜索功能。我已经在Jquery中做了这件事，但我想在Angular材质中做同样的事情。这是一张设计图。
浏览 40提问于2019-11-07得票数 0
2回答
我使用Angular并使用Angular材质https://material.angular.io/components/autocomplete/api 1：
我想在我的md-autocomplete中添加一个边界半径，但它不起作用：
<md-autocomplete class="myclass">
.myclass{
background-color: rgb(250, 250, 250);
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px
}
你
浏览 0提问于2017-10-04得票数 2
回答已采纳
我想在angular 2材质中实现全部展开和全部折叠。有谁能给出主意吗？如何做到这一点？
浏览 3提问于2018-03-12得票数 10
回答已采纳
我正在尝试在我的angular 2/4+项目中实现自动补全功能。我已经尝试了许多库，但都不起作用。他们给了我类似的错误：Unexpected module 'NgAutoCompleteModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation
这就是我尝试使用的库：
我遵循了除add mapping in systemjs config部件之外的所有步骤。我在使用CLI创建的项目中找不到systemjs文件
浏览 0提问于2018-04-23得票数 1
如何调用多个api并使用角度材质数据表动态显示数据。因为我是angular的新手，我想知道一些例子。
浏览 9提问于2019-11-23得票数 0
我需要渲染数百个共享网格和材质的对象(并且有不同的QTransform)。我发现的唯一方法是为它们创建一个QEntity实例。每一个都会持有网格和材质的一个实例，这会导致巨大的时间和内存浪费。
有没有办法让它更有效率呢？我知道使用原始OpenGL，您可以重用网格和着色器，加载它们一次，然后在同一帧中多次使用不同的变换和着色器参数。也许Qt3D也有类似的东西？
浏览 3提问于2018-01-06得票数 1
我无法在app.module.shared文件中导入@angular/animations：
当我在app.module.browser文件中导入@angular/animations时，动画不起作用。
在angular asp.net Core2模板中使用材质动画需要做什么？
浏览 1提问于2017-09-26得票数 1
我对angular (angular材质)真的很陌生，我正在处理这个包含多个字段(输入、带有自动完成功能的芯片)的表单。在模糊状态下，如果字段保留为空，则需要的输入将变为红色。芯片输入字段不会发生这种情况。有没有一种简单的方法来实现它？
浏览 14提问于2017-04-19得票数 2
我有一个自动补全字段，我只是想知道如何将它用于多个单词？当我输入第一个单词时，它可以完美地工作，但当我空格并输入第二个单词时，它会将这两个单词发送回服务器，当然结果是错误的！
例如：当我输入这两个词的时候，
‘'Java javascript’
第一个单词“Java”，自动补全效果很好，拉出列表。
但当我空格并输入javascript时，自动补全功能会将'Java +javascript‘发送给我的ajax函数。
有什么办法解决这个问题吗？
浏览 0提问于2009-05-05得票数 13
回答已采纳
2回答
我使用脚本自动完成功能创建了一个包含大量可编辑字段的页面，字段的数量是动态的，因此我创建了一个数组来保存所有的自动完成对象。
然后，我需要允许用户在页面的每个位置添加一个字段，因此，我创建了一个javascript函数来重做文本字段的序列，并重新创建所有的自动完成。
但有一个问题，旧的自动补全也会出现在页面上，即使将数组的长度设为零，旧的自动补全也是空白的。
有没有办法完全删除原型对象？
浏览 1提问于2012-12-18得票数 1
回答已采纳
1回答
我使用Angular材质Mat-Table和Angular 8，并动态传递dataSource。每次的行数和列数都不同。有没有办法在生成表格后找到在屏幕上呈现的表格的宽度？ <mat-table [dataSource]="dataSource" #reportTable>
...
...
...
</mat-table>
浏览 17提问于2020-07-04得票数 0
我正在使用Angular 6和Angular材质7.1.1，并且我正在尝试使用具有自动补全的芯片。但问题是，当我选择其中一个选项时，它会应用于所有具有自动完成功能的芯片。
`<mat-form-field class="example-chip-list">
<mat-chip-list #chipList>
<mat-chip
*ngFor="let fruit of fruits"
[selectable]="selectable"
[removable]="
浏览 3提问于2018-12-19得票数 1
我正在用Golang编写一个bash完成程序。实际上，该程序是它自己的完成程序，因为它查找COMP_LINE环境变量，如果该环境变量存在，它将输出完成选项，如果没有，则继续运行主程序。 然后，使用以下组件安装完成程序： complete -C /path/to/my-program my-program 这样做效果很好。对于我的大多数完成，我希望在单词完成后添加一个空格，但是对于一些标志，我不希望发生这种情况。 定义完成后，可以设置-o nospace选项，以便在完成单词时省略尾随空格。但是，所有需要空格的补全必须显式地添加到补全词列表中。 有没有办法让我的程序可以根据它返回的完成动态地修改
浏览 16提问于2019-04-25得票数 1
回答已采纳
我正在为一个AngularJS项目使用Webstorm IDE。
我已经在库中添加了AngularJS和自动补全等功能。
但是，Webstorm IDE并没有找到非常核心的函数angular.module()。我已经尝试了所有方法(重新安装，等等)但它似乎仍然不起作用。
你知道它会是什么吗？
浏览 0提问于2015-11-05得票数 7
问题陈述:我正在实现Angular材质的mat-form-field属性。我将表单域外观作为轮廓。当选择输入时，我正在尝试更改输入边框的颜色。
预期行为。选择输入时，输入字段的轮廓边框颜色应该会更改。当表单域处于活动状态时，我想将轮廓的颜色更改为黑色。
当前行为:现在，当表单域处于活动状态时，它会显示角度材质的默认原色。
这些都是我的依赖
{
"dependencies": {
"@angular/animations": "^6.1.9",
"@angular/cdk": "^6.4.7&#
浏览 0提问于2018-10-15得票数 3
我有一个带有DataSource集合的角度材质表，并且正在使用Material Table Filter来过滤数据。代替常规输入，我有两个自动完成的材料，它们从表中的唯一值的来源填充他们的选项。就其自身而言，这些自动完成功能运行良好-如果您在其中搜索一个名称，则选项会向下过滤到表中可用的内容。问题出现在多个自动完成，因为我找不到一种方法让第二个自动完成用当前过滤的数据更新它的选项，而不是显示每个值。它应该只显示当前过滤数据中的选项。 这是我的自动补全之一： <!-- Filter by Course Code -->
<
浏览 28提问于2021-08-19得票数 0
回答已采纳
当打开材质菜单时，材质为8的Angular 8应用程序在IE11上抛出以下错误： Unable to get property 'opacity' of undefined or null reference 它在angular 7.2上工作得很好。使用的IE11版本: 11.1146.16299.0更新版本: 11.0.125 新的项目依赖版本： "dependencies": {
"@angular/animations": "^8.0.0",
"@angular/cdk": "^8.0.0"
浏览 42提问于2019-06-04得票数 2
我正在尝试添加材料设计到jhipster生成的网关。尽管它似乎在工作，但我在控制台上得到了这个警告；
Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
Could not find HammerJS. Certain Angular Material components may not w
浏览 1提问于2017-07-04得票数 2
我试图在Angular 2中创建我自己的自定义主题，但我一直收到错误。
我尝试过安装和重新安装webpack，并重新构建了一些其他模块，但都没有帮助。
ERROR in ./src/app/themes.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined
^
Argument `$map` of `map-get($map, $key)` must be a map
in C:\Users\Administrator\Dev\
浏览 0提问于2019-07-17得票数 0
4回答
我们正在开发一个ASPX (.NET 2.0)页面，其中包含一个包含太多元素的选择列表(200+)。
我们需要某种形式的自动补全，以使其行为类似于文本框，但具有自动补全建议。
我们想使用JQuery。到目前为止，我们的搜索只找到了需要某种后端服务的自动补全，额外的请求( AJAX)等。我们更倾向于使用页面请求一次交付所有数据。理想情况下，它将作为选择列表条目。
是否有可转换选择列表的自动完成框？或者，有没有一种方法可以将自动完成连接到页面上已经存在的数据(在带有.NET 2.0的ASPX中)，这样它就不必访问外部资源了？
编辑: Postbacks不是我想要的措辞。我的意思是与原始页面请求一起
浏览 1提问于2009-05-05得票数 0
回答已采纳
我使用的是Angular 5的材质设计。我在matInput中发现了非常奇怪的显示问题，在编辑模式下文本(如g)部分隐藏。有趣的是，此行为也存在于Angular材质示例中，请参阅此处：
有什么帮助来解决这个问题吗？
在MacOS (Macbook Pro)上发现问题，并且可以在chrome和safari上重现。
浏览 7提问于2017-12-27得票数 1
我使用ngx-codemirror，希望在鼠标输入字符串时显示一个mat-tooltip。在AngularJS中这样做的方式： el = angular.element('.cm-string');
el.attr('uib-tooltip', "Tooltip text");
el.attr('tooltip-append-to-body', 'true');
$compile(el)(scope); 有没有一种动态附加matTooltip或任何指令的方法？
浏览 11提问于2019-03-11得票数 1
HTML：
<input type="text" id="shop-id">
JS：
$(document).ready(function(){
$( "#shop-id" ).autocomplete({
source: "/ticket/get_sids",
select: function(event, ui){
//...
}
});
})；
有一个奇怪的自动补全问题。如果我用这样的静态变量声明源
浏览 5提问于2012-09-17得票数 2
回答已采纳
4回答
我尝试过texmaker，它有内置的"intellisense“自动补全功能，但它找不到大多数的包，因为它似乎只识别最基本的latex命令。
你知道有没有intellisense编辑器有很好的命令基础，或者更好的是，有一个编辑器可以动态地从你安装的包中提取语法？
谢谢！
浏览 1提问于2010-08-14得票数 4
回答已采纳
我正在使用Angular 6和Angular材质。我正在尝试从mat-chip和autocomplete保存所选对象或所选对象列表。我可以向fruits[]数组发送字符串值，但不能向fruits[]数组发送所选对象。请帮我找到一个解决方案。谢谢。
我的演示项目链接：
浏览 7提问于2018-07-09得票数 6
回答已采纳
1回答
在项目的样式表中检索主色
、、、、
有没有办法将angular材质主题中使用的原色检索到angular项目的css文件中？
在项目中，我们可以这样定义*.scss文件中的原色：
@import '~@angular/material/theming';
@include mat-core();
$primary: mat-palette($mat-green, 800);
$accent: mat-palette($mat-teal, 600, A100, A400);
$warn: mat-palette($mat-red, 600);
$theme: mat-light-theme($pri
浏览 0提问于2017-11-23得票数 0
6回答
材质图标在我的项目中没有正确渲染，我正确安装了，但即使没有在浏览器中显示。
我按照以下步骤操作：
npm install material-design-icons
..angular cli.json
"styles": [
"styles.css",
"../node_modules/material-design-icons/iconfont/material-icons.css"
],
app.module.ts
import {MatSidenavModule, MatToolbarModul
浏览 112提问于2017-10-08得票数 24
我在Windows上做了一些初学者AppEngine开发，并为此安装了Eclipse.我喜欢对象和函数的自动补全功能。
我将我的开发环境转移到我的Macbook上，并安装了Eclipse Ganymede。我安装了Eclipse和AppEngine插件。但是，当我现在输入代码时，自动完成功能不起作用。我是不是走错了一步？
更新
只是补充一下：
这行代码：
import cgi
似乎能给我我需要的东西。当我输入“cgi”时我得到了所有的自动补全。但是，这些代码行：
from google.appengine.api import users
from google.appengine.ext i
浏览 1提问于2009-05-30得票数 0
回答已采纳
我使用的是虚幻引擎4 ，它有一个白板，你可以在上面画。它使用呈现目标将线条呈现到画布上。
问题是，当我将白板复制到关卡中的其他地方使用时，它会显示相同的图形，如下所示：
下面是我使用的材质和纹理：
我试着复制一份材料和纹理，并在其中一块白板上使用，但效果相同。我不确定为什么渲染目标不是实例化/唯一的？为什么它在白板的多个实例上绘制相同的内容？
编辑(附加细节)：我制作了一个原始渲染目标的副本并尝试指定，相反，我还制作了原始渲染目标的一个material实例，并为副本指定了该实例，但仍然存在相同的问题。我尝试动态创建渲染目标和材质实例，就像您在这里看到的一样，但是我无法在上面
浏览 4提问于2018-09-17得票数 6
我使用的是Angular 6和Angular材质。当我点击编辑按钮时，次要、SSC和Male值将在select上初始化。但是我不能这样做。单击编辑按钮后，我只能在下拉列表中显示男性值。因此，我希望在下拉列表中显示所有值，并传递动态选择的对象。谢谢。
我的代码链接在这里：
浏览 1提问于2018-07-02得票数 4
回答已采纳
我有一个Material模块，它包含角度材质组件的导入/导出。
import { NgModule } from '@angular/core';
import {
MdToolbarModule,
MdIconModule,
MdSidenavModule,
} from '@angular/material';
@NgModule({
imports: [
MdToolbarModule,
MdIconModule,
MdSidenavModule,
],
exports: [
MdToolbarM
浏览 4提问于2018-05-18得票数 1
我正在尝试使用fromEvent和defer模块的rxjs动态设置按钮的单击事件。当使用普通的html按钮时，它工作得很好，但是不适用于角材质按钮。
下面的代码可以很好地处理普通按钮：
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { defer, fromEvent } from 'rxjs';
import { map, tap } from 'rxjs/operators';
@Component({
selector:
浏览 2提问于2020-01-08得票数 0
回答已采纳
我正在使用@angular/material@2.0.0-beta.2。我在display:none容器中有mdTextareaAutosize属性的文本区(弹出窗口)。我调用角形控件的setValue方法。当我打开弹出窗口时，文本区域有height:0px，初始值没有显示。当我点击文本区域并按下任意键时，会出现初始值。
如果我添加布尔条件来显示textarea (*ngIf)，并在2秒内将该条件设为true，那么它就可以工作。但如果没有timeout，它就不能工作。
浏览 3提问于2017-04-18得票数 1
1回答
如何使白色球体(THREE.SphereGeometry)在深绿色曲面和白色场景背景上可见？在Three.js中有没有一些大纲？可能是动态轮廓？
three.js r.58
浏览 4提问于2013-06-11得票数 1
回答已采纳
1回答
角度材质表教程介绍了在中过滤数据的方法。本教程使用MatTableDataSource<DataItem>来演示过滤。
但是，我使用Angular的schematics命令ng generate @angular/material:material-table --name <component-name>创建了数据表，它提供的数据源类扩展了DataSource<DataItem>。能否使用前一种方法对其进行过滤？
浏览 0提问于2018-07-17得票数 3
1回答
我正在使用Angular 4和Angular材质，并且我正在搜索根据当前分辨率应用类的方法。我正在搜索类似这样的东西(使用Angular Material的断点)：
<div [ngClass]="{'no-left-margin': AngularMaterialBreakpoint}"></div>
或者：
<div [ngClass]="{'no-left-margin': window.screen.width < 1280}"></div>
但第一种方法更可取。我已经
浏览 5提问于2017-07-23得票数 1
回答已采纳
1回答
如何创建多级菜单angular 2材质类似 (angular js)
<md-button ng-click="$mdOpenMenu()">Link1</md-button>
浏览 0提问于2017-06-11得票数 0
我想让许多文本输入字段自动补全...但是有了这个自动补全
<html><head><script type="text/javascript" src="jquery-1.4.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" hr
浏览 2提问于2012-06-29得票数 3
回答已采纳
我想在angular 7中使用material-ui。我知道angular材质是present.But的。我想使用ui-material而不是angular material。我不知道如何在angular中使用它
浏览 0提问于2019-07-09得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
