Angular材质自动完成如何将json对象绑定到mat-option
Angular材质自动完成是Angular框架中的一个组件，用于实现自动完成功能。它可以将一个JSON对象绑定到mat-option，实现动态的选项列表。
要将JSON对象绑定到mat-option，首先需要在Angular组件中定义一个变量来存储JSON对象的数据。可以使用HttpClient模块从后端获取JSON数据，或者在前端定义一个静态的JSON对象。
接下来，在HTML模板中使用mat-autocomplete组件来创建自动完成输入框。通过[(ngModel)]指令将输入框的值与组件中的变量进行双向绑定。
然后，在mat-option中使用*ngFor指令遍历JSON对象的属性，并将属性的值作为选项的显示文本。可以使用{{}}语法来显示属性的值。
最后，可以使用mat-option的[value]属性将选项的值绑定到另一个变量，以便在组件中获取用户选择的值。
以下是一个示例代码：
<input type="text" [(ngModel)]="selectedValue" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of jsonOptions" [value]="option.value">
{{ option.text }}
</mat-option>
</mat-autocomplete>在上面的代码中，selectedValue是组件中的变量，用于存储用户选择的值。jsonOptions是存储JSON对象的变量，它应该在组件中进行初始化。
对于推荐的腾讯云相关产品，腾讯云提供了云服务器（CVM）、云数据库（CDB）、云存储（COS）等产品，可以用于支持Angular材质自动完成的开发和部署。具体产品介绍和链接如下：
- 云服务器（CVM）：提供可扩展的计算能力，用于部署和运行Angular应用。了解更多：腾讯云云服务器
- 云数据库（CDB）：提供高性能、可扩展的数据库服务，用于存储和管理应用的数据。了解更多：腾讯云云数据库
- 云存储（COS）：提供安全可靠的对象存储服务，用于存储和管理应用的静态资源。了解更多：腾讯云云存储
通过使用这些腾讯云产品，可以实现高效、稳定的Angular材质自动完成功能的开发和部署。
相关·内容
我正在使用with multiple.I。我想在控制台中显示选定的值。我使用的是Angular 6材质设计，我得到了html格式的值。但我希望在ts文件中以逗号分隔所有选定的值。下面是我的代码。 <form [formGroup]="searchUserForm" fxFlex fxLayout="column" autocomplete="off" style="margin: 30px">
<mat-select placeholder="User Type" formControl
浏览 22提问于2019-04-10得票数 0
回答已采纳
我在模型类中使用了C#字典，如下所示
public class CommonInfo
{
public Dictionary<string, string> JobTypes { get { return _dic; } set { _dic = value; } }
Dictionary<string, string> _dic = new Dictionary<string, string>
{
{"PO","Production" },
{"SO"
浏览 22提问于2019-07-15得票数 0
回答已采纳
1回答
角度版本: 5.0.0角度/材质版本: 5.2.4
我得到了这个表单：
<form #updateForm="ngForm">
<mat-form-field>
<input type="text" matInput [formControl]="studentFormControl [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFo
浏览 0提问于2018-05-10得票数 0
当我试图编辑一个记录时，我无法设置mat-autocomplete的值我正在使用FormBuilder对象中的FormControl对象来使用自动完成，并使用Formbuilder.setValue()方法来设置从服务器接收的值尽管它向服务器发送了一个请求，因为我正在使用valueChanges方法的Observables ...任何帮助都将不胜感激
下面是我正在使用的代码
component.ts
this.filteredData = this.addDetailsForm.get('product').valueChanges
.debounceTime(400)
.do
浏览 0提问于2018-01-20得票数 1
我使用的是Angular 8和angular material的最新版本。我有一个mat表单字段，选择正在工作等，但样式没有，它覆盖了我的文本，只有选定的文本应该去的地方。 这是图片：https://ibb.co/0YNs21L 在控制台中，我没有警告说没有包含angular材质主题，这是iI输入angular css主题的angular.json文件 <mat-form-field>
<mat-label>Select an option</mat-label>
<mat-select [(value)]="selected
浏览 11提问于2019-09-03得票数 0
3回答
我在Angular中有一个简单的<select> (带材质)，如下所示：
<mat-form-field>
<mat-label>Type</mat-label>
<mat-select placeholder="Type" formControlName="type" name="type" id="name">
<mat-option>None</mat-option>
<mat-option *ngFor=
浏览 0提问于2018-10-04得票数 3
1回答
你好，我正在尝试将选择的角度材质包装在一个共享组件中。除了一件事，那就是“多重”属性之外，所有的东西都像魔咒一样工作。 我试图绑定到一个"@Input()“属性"multiple"，代码如下 dropdown.component.ts import { Component, Input } from '@angular/core';
@Component({
selector: 'dropdown',
templateUrl: './dropdown.component.html',
style
浏览 24提问于2019-06-22得票数 2
回答已采纳
我刚接触angular，所以我希望这不是很明显。
简短说明:我正在尝试通过单击MatToggleButton将字符串复制到角度材质自动完成格式字段中。到目前为止，我成功地更改了底层模型的值，但没有更改字段中显示的字符串。如果没有从自动完成中选择任何内容，并且我按下按钮，则文本将被复制。如果从自动完成中选择了介于两者之间的内容，则无法显示输入的文本。
详细说明:我尝试使用MatButtonToggleChange填充自动完成。列表中的选择来自生产中的Solr-Server，因此是Document的接口和示例Results的结构。当自动完成中的值被选中时，它返回一个对象而不是字符串，因此displ
浏览 0提问于2018-06-08得票数 0
4回答
如何将初始值设置为角材质垫-选择使用对象列表作为选项的倍数。代码可以在上找到并运行
下面是HTML：
<form [formGroup]="formGroup">
<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select formControlName="toppings" multiple>
<mat-option *ngFor="let topping of
浏览 0提问于2019-07-08得票数 2
回答已采纳
1回答
我正在尝试创建一个简单的mat-select，这是我在一个组件中指定代码的方式：
<mat-form-field>
<mat-select>
<mat-option>First Option</mat-option>
<mat-option>Second Option</mat-option>
</mat-select>
</mat-form-field>
这是我的app.component.ts的样子：
import { BrowserModule
浏览 10提问于2020-05-18得票数 1
回答已采纳
如何将mat-option绑定到control？我尝试了一些类似<mat-option *ngFor="let option of control.value" [value]="option">、<mat-option *ngFor="let option of control.value['option']" [value]="option">和其他变体的东西。但还是不起作用。
<form [formGroup]="myForm">
<ng-con
浏览 5提问于2019-10-09得票数 0
回答已采纳
当Angular 5材质mat-select设置为disabled时，如何更改显示选定值的文本的字体颜色。目前，它默认为灰色，我想要更改它，以便它显示深蓝色，无论是禁用还是启用。
<mat-form-field>
<mat-select placeholder="Select a Product" [(ngModel)]="selected" [disabled]="isDisabled" panelClass="my-select-panel-class">
<mat-opt
浏览 0提问于2018-04-29得票数 2
2回答
使用对象的角默认值下拉列表
、、、、
我正在为我的项目使用Angular材质(最新的稳定版本)，并且我不能通过使用对象在下拉列表中设置默认值。我的代码： TS文件： selectedObject: any;
selectedObjectList: any = [{ key: 1, value: 'One' }, { key: 2, value: 'Two' }, { key: 3, value: 'Three' }];
changeMatObject(value: any) {
console.log('MatObject value: ', value);
浏览 11提问于2020-11-04得票数 1
我在选择列表中使用"Select All“来清除任何其他选中的选项，而只选择"All”选项。我可以清除所有选定的选项，但不能选择“全部”选项。
<mat-form-field class="example-full-width">
<mat-label>Select Program(s)</mat-label>
<mat-select #myprograms [formControl]="myprgrmFormControl" multiple [(ngModel)]="criter
浏览 0提问于2021-06-05得票数 1
1回答
我现在试图改变垫上的项目数量-自动完成一段时间，但没有成功。我用的是material.angular.io
这是我的密码
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-add-and-search',
templateUrl: './add-and-search.component.html',
styleUrls: ['./add-and-search.component.css']
})
expor
浏览 3提问于2019-03-18得票数 1
回答已采纳
我有一个非常简单的自动完成示例，在该示例中，每次输入更改时，我都会搜索API中的数据并返回product_name和id。现在的问题是，我需要将名称和id都发送到对话框，但是如果我将一个对象绑定到mat-option [value]，比如[value]=option，表单控件将显示[object][object]。 但是[value]=option.name运行良好 如何将json对象绑定到mat-option值，以便可以同时使用name和id 数据的格式为{product_id: 4, name: "abc"} .ts getfiveProducts() {
th
浏览 8提问于2020-04-29得票数 0
下面是一个从Angular材质库中选择的简单示例 <mat-form-field class="ui20-filter-select">
<mat-label>Priority</mat-label>
<mat-select name="byPriority" [(ngModel)]="filter.priority (selectionChange)="filterChanged.next($event)">
<mat-option [value]="
浏览 64提问于2021-04-02得票数 0
回答已采纳
2回答
如何在关闭angular材质中的多选下拉菜单时触发事件？这是我的HTML模板 <mat-select multiple
(focusout)="triggerEvent($event)">
<mat-option *ngFor="let option of templateOptions"[value]="option">
{{option.name}}
浏览 23提问于2019-08-26得票数 4
回答已采纳
我在angular 5应用程序中使用了这个Angular材质组件：
默认情况下显示6个选项。有没有办法调整它，比如默认显示4个选项？
<mat-form-field style="width:88%;margin-top:5px;">
<mat-select formControlName="contact" placeholder="Kontakt *">
<ngx-mat-select-search [formControl]="contactFilter"><
浏览 3提问于2018-06-15得票数 0
1回答
选择中的角度材质按钮
、、、、
我尝试在angular material select中显示按钮，并使用以下代码：
<mat-select #placeNameControl="ngModel" placeholder="Place name">
<mat-option >
Add new place name
</mat-option>
<mat-option *ngFor="let addedPlaceName of addedPlaceNames" [value]="addedPlaceName"
浏览 5提问于2017-12-29得票数 1
回答已采纳
1回答
在将Angular Material从v6.0.1更新到v6.4.7之后，应用程序的所有mat-form-field都有.mat-form-field-hide-placeholder类，它基本上添加了以下代码：-webkit-text-fill-color: transparent;
现在所有的占位符都是透明的。
这是我们如何将占位符与mat-form-field一起使用的示例
<mat-form-field *ngIf="option">
<mat-select class="irregularselector"
浏览 1提问于2018-10-05得票数 0
我在Angular中有一个多选，想要设置一些初始值。请参见以下示例：
模板
<form [formGroup]="filterFormGroup">
<mat-form-field color="accent">
<mat-label>{{ 'Users' }}</mat-label>
<mat-select formControlName="users" multiple>
<mat-option [value]="null
浏览 5提问于2020-05-15得票数 2
1回答
我正在申请Angular酒店。我正在尝试做酒店名称搜索和酒店区域搜索过滤器。当我搜索酒店名称时，代码工作正常，但是当我添加一个地区搜索时，代码被破坏，两个人一起搜索地区。我该怎么修复呢？
.html
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Which Hotel?" matInput [formControl]="myC
浏览 4提问于2020-03-03得票数 0
我有以下代码：
<mat-form-field id="citydropdown" >
<mat-select placeholder="Office" class="useroptions" name="office" [(value)]="cityid" >
<mat-option [value]="">Firm-wide</mat-option>
<mat-option [value]="4" >Century C
浏览 1提问于2020-06-18得票数 0
2回答
<mat-select placeholder="{{placeholder}}" [compareWith]="compareValues" (selectionChange)="selectionChanged($event)">
<mat-option #matOption *ngFor="let item of itemsList | async" [value]="item['{{value}}']">
{{item.Name}}
浏览 1提问于2019-01-26得票数 1
回答已采纳
1回答
What the webpage looks like 因此，我正在尝试创建一个下拉列表，但当单击该下拉列表时，它显示的不是与其他输入重叠，而是在屏幕底部。 下面是相关的HTML代码块： <div class="form-row">
<!-- Grid column -->
<div class="col-md-6">
<mat-form-field>
浏览 15提问于2019-10-14得票数 0
我使用的是角5，并得到控制台错误：
不能绑定到“ngValue”，因为它不是“mat-option”的已知属性
我的模板如下所示：
<mat-select placeholder="Select Book" name="patient" [(ngModel)]="selectedBook">
<mat-option *ngFor="let eachBook of books" [ngValue]="eachBook">{{eachBook.name}}</mat-
浏览 1提问于2018-02-14得票数 14
回答已采纳
1回答
嗨，在我的angualr7应用程序中使用的是角材料自动完成组件，并且正在研究如何将一个值从api响应绑定到它。有谁能提供解决办法来解决这个问题？
HTML：
<mat-form-field>
<input type="text" [(ngModel)]="templateId" name="templateId" #templateId="ngModel" placeholder="Template" matInput
[matAutocomplete]="auto
浏览 1提问于2020-07-06得票数 0
2回答
我工作的角度4材料，特别是自动完成组件。
我的选项列表filteredHomeTeams类型为Observable< Team >，我正在使用这样一个名为teamName的对象的属性构建下拉列表和选择
下面是HTML：
<mat-form-field class="example-full-width">
<input type="text" matInput placeholder="Local" [formControl]="HomeTeamCtrl" [matAutoco
浏览 4提问于2017-10-22得票数 3
回答已采纳
1回答
现在，我渲染我的多选角度材质选择框中的每个选定元素。 当我选择其中的一个元素时，渲染就会起作用。但当我取消选择一个时，它就一直在添加。 我的猜测是，我必须设置一个属性，如取消选择或其他东西，但我不确定，有人能帮我吗？ HTML： <mat-select [formControl]="person" required>
<mat-option>--</mat-option>
<mat-option *ngFor="let person of person" [value]="person"
浏览 12提问于2021-11-19得票数 0
2回答
我有一个表单，其中包含一个使用angular材质的mat-select组件的下拉列表。 <mat-select multiple (selectionChange)="onFilter($event)">
<mat-option *ngFor="let section of someDropdown" [value]="section">
{{section}}
</mat-option>
</mat-select>
<button class="some-b
浏览 28提问于2019-05-03得票数 0
回答已采纳
11回答
我在Angular material项目中有一个简单的选择选项表单字段：
component.html
<mat-form-field>
<mat-select [(value)]="modeSelect" placeholder="Mode">
<mat-option value="domain">Domain</mat-option>
<mat-option value="exact">Exact</mat-option>
浏览 216提问于2018-06-02得票数 90
回答已采纳
我正在使用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
我使用的是带有后缀的角材质表单字段，包括cm，mm等。在这里，我需要一个给定数字的值作为输入，并在一个formcontrolName中使用后缀选择的下拉值，这是我的代码。
<mat-form-field class="flex ">
<mat-label>Width</mat-label>
<input matInput [formControlName]="'width'" type="number" autocomplete="off">
浏览 4提问于2022-11-15得票数 0
有一些使用JSON结构的MatOptGroup过滤的例子，但它们不是嵌套的。这就是为什么我会纠结于这个问题。 <mat-form-field>
<mat-label>Database</mat-label>
<mat-select [formControl]="databaseControl">
<mat-option>-- None --</mat-option>
<mat-optgroup *ngFor="let group of
浏览 16提问于2019-12-05得票数 0
3回答
我正在做一个angular 5项目。有许多mat-select元素应该是只读的，就像文本框一样。我发现有一个disabled特性，它是：
<mat-form-field>
<mat-select placeholder="Choose an option" [disabled]="disableSelect.value">
<mat-option value="option1">Option 1</mat-option>
<mat-option value=
浏览 3提问于2018-06-26得票数 20
回答已采纳
我正在尝试自定义具有多个选择的mat-select的触发器标签。
这不是我的代码。
实际代码如下所示：
<mat-form-field *ngIf="filter.type === 'dropdown' && filter.multiple">
<mat-select (selectionChange)="filterChanged(filter, $event)" [(value)]="filter.currentValue" [placeholder]="filter.name |
浏览 13提问于2019-07-25得票数 1
我有一个<mat-select>元素，我想对该元素的模糊执行一个函数。 当前，该函数在选择更改时执行： <mat-form-field fxFlex>
<mat-label>SSR Status</mat-label>
<mat-select [formControl]="ssrStatuses" multiple (selectionChange)="filtersUpdated()" [(value)]="selectedSsrStatuses">
<mat-
浏览 8提问于2019-06-12得票数 2
1回答
使用Angular 5、Material component和Firebase处理项目。是否可以通过一个字段存储两个值。下面是我的代码，我从客户端表中获取数据，并在下拉列表中显示名称，但存储"client_id“。我也想用client_id存储client_name。
<mat-form-field>
<mat-select placeholder=" Select Client" formControlName="client_id" required>
<mat-op
浏览 11提问于2018-08-07得票数 1
回答已采纳
我无法用Angular8动态显示与角度材质选择形式有关的数据。我的密码在下面。
product.componet.html：
<form [formGroup]="productForm" (submit)="saveProduct($event)" novalidate>
<mat-form-field appearance="outline" class="col-lg-4 col-md-6 col-sm-12">
<mat-label>Product Name&
浏览 2提问于2019-12-16得票数 1
回答已采纳
我最近在我的Angular项目中添加了angular Material accordion组件。在API中，他们使用为自动关闭面板提供的示例： <-- look here (在模板中执行(opened) = panelStateOpen并在组件中指定布尔值)
我这样做了，但因为我遍历了menuItems的信息，有两个组件，然后注入我的扩展面板，panelOpenState是不正确的。
现在，我有
<mat-accordion *ngFor="let menuItem of menuItems">
<confmenu menuItem={{menuIt
浏览 0提问于2019-12-12得票数 2
我在我的应用程序中使用angular材质，因此我对选择框使用mat-form-field mat-select和mat-option标签。
我为此创建了一个子组件，并将其添加到父组件中。当我使用：
<mat-form-field>
<mat-select ...>
<mat-option ...></option>
</mat-select>
</mat-form-field>
并将ngModel传递给父对象，它不会像预期的那样工作。对于绑定和ngModel这两种方式，没有传递任何值
但
浏览 5提问于2018-07-10得票数 1
在angular组件中，我需要显示一个复选框并在保存成功时将其淡出。完成他的任务的最好方法是什么？我知道我需要使用以下css
<code>A0</code>
我困惑的是什么时候通过<code>D1</code>值来显示它，然后我如何将组件切换为隐藏。本质上是如何在保存成功时显示它，然后达到隐藏效果。
浏览 13提问于2020-07-31得票数 0
在尝试以编程方式选择自动完成中的选项时，我遇到了一个问题。
MatAutocomplete没有select方法，所以我尝试在MatOption上使用select方法。这似乎没有做任何事情。
matAutocomplete.options.find(opt => opt.id === 1).select();
使用自动编译选项(_emitSelectEvent)方法会触发optionSelected方法，但不会更新UI或实际将选项设置为选中状态。
matAutocomplete._emitSelectEvent(option);
有没有办法以编程方式选择一个选项，使其更新UI并调用opti
浏览 3提问于2018-07-07得票数 18
回答已采纳
2回答
我是Angular的新手，我正在尝试使用Angular 5构建一个具有自动完成功能的文本域。
我在中找到了这个示例：
我想知道如何编写单元测试来测试自动完成功能。我为input元素设置了一个值，并触发了一个'input‘事件，并尝试选择mat-option元素，但发现它们都没有被创建：
我的组件的相关部分html：
<form>
<mat-form-field class="input-with-icon">
<div>
<i ngClass="jf jf-search jf-lg md-pri
浏览 45提问于2018-05-20得票数 14
3回答
角2材料自动完成选择值
、、、
我有自动完成的输入
<div formArrayName="addresses">
<div class="row"
*ngFor="let itemrow of searchForm.controls.addresses.controls; let i=index"
[formGroupName]="i">
<mat-form-field>
<input type="text"
clas
浏览 0提问于2017-12-06得票数 4
我对角质还不熟悉。下面的代码部分带有一个表格中的下拉框。我正试图将“串行”从HTML文件传递到ts文件。我试着不提交表格就这么做。不过，到目前为止我还没成功。在不提交表单的情况下，如何将“串行”从HTML传递到ts文件？
<mat-option>All</mat-option>
<ng-container *ngFor="let userRole of serialList">
浏览 0提问于2021-04-01得票数 2
回答已采纳
2回答
我有一个表单，用户在其中输入一些数据，然后发送一个帖子。现在我正在开发一个功能，允许编辑以前输入的信息。字段中的一些输入具有嵌套对象，如下所示：
export class Transfer {
constructor(
public id: number,
public destination: string,
public market: string,
public project: Project,
public workstream: Workstream,
public conta
浏览 33提问于2020-02-17得票数 0
1回答
我有一个角度材质选择组件，我想将下拉菜单的选定值绑定到来自firebase的标量的观察值。我想在组件中不展开可观察对象的情况下这样做。看起来我不能使用异步管道绑定值。下面的代码抛出了一个异常，因为mat-select的值不能绑定到"uiStateSvc.currentClient$ | async“。
<mat-form-field *ngIf="(store.authorizedClients$ | async)?.length > 0">
<mat-select [(value)]="uiStateSvc.currentClien
浏览 18提问于2018-06-02得票数 10
我正在尝试隐藏/打开角度材质下拉菜单。
treps.html
<mat-form-field>
<mat-select #color formControlName="colors">
<mat-option value=''></mat-option>
<mat-option [value]="color" *ngFor="let color of colors"> {{color}}
浏览 0提问于2019-11-03得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
