如何在mat-select中使用angular 6获取下拉文本
在Angular 6中使用mat-select获取下拉文本，你可以按照以下步骤进行操作：
- 首先，确保你已经安装了Angular Material库。如果没有安装，可以通过运行以下命令来安装它：
npm install --save @angular/material @angular/cdk @angular/animations- 在你的Angular项目中，打开你想要使用mat-select的组件文件。
- 在组件文件的顶部，导入所需的Angular Material组件：
import { MatSelect } from '@angular/material';- 在组件类中，声明一个变量来存储选中的下拉文本：
selectedOption: string;- 在HTML模板中，使用mat-select组件来创建下拉列表，并绑定选中的值到变量selectedOption：
<mat-form-field>
<mat-select [(ngModel)]="selectedOption">
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>- 如果你想在选中选项时执行一些操作，你可以添加一个change事件处理函数：
<mat-form-field>
<mat-select [(ngModel)]="selectedOption" (change)="onOptionSelected()">
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>在组件类中，实现onOptionSelected()函数来处理选项选择的逻辑。
这样，你就可以在Angular 6中使用mat-select获取下拉文本了。
关于Angular Material的更多信息和使用方法，你可以参考腾讯云的Angular Material产品介绍链接地址：https://cloud.tencent.com/product/AM
相关·内容
我有很少的下拉列表，并且我需要使用相同的函数调用来动态填充下拉列表的值。我有一个对象数组，我将从其中填充下拉列表中的值。
因此，我的想法是将drop的名称作为参数传递，并迭代值的数组，然后将值列表返回到drop中
问题是:当页面加载时，如何从选择框调用Angular 6中的任何函数？我不想在单击或更改时调用函数，我只想在页面加载到所有select标记时调用。
<mat-select [(ngModel)]='name' placeholder="Name" formControlName="name" required>
&l
浏览 0提问于2018-10-01得票数 0
我在angular material中搜索了过滤后的下拉选项，但使用mat-select multiselect找不到任何东西。我不认为angular material中的mat-select实现是可用的。有没有办法使用angular材质来实现这一点？
浏览 12提问于2020-02-14得票数 0
1回答
我有<mat-select>和ngFor，它显示表中的行列表。我需要把验证列类型，我应该只能选择一个键，然后，用户不应该能够选择键类型下拉。
// Code for html(Angular 7)
<!-- Column for Type-->
<ng-container matColumnDef="type">Type
<mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
<mat-cell *matCellDef=&
浏览 0提问于2018-12-19得票数 1
回答已采纳
2回答
自定义垫-选择宽度-角度11
、、、、
我是Angular/Angular材料的新手，所以我不确定这是我需要自己编写的代码，还是已经以特定方式构建的代码。我的mat-select下拉列表有问题，单击选择时弹出的面板与箭头的下拉栏的宽度不匹配。我从这个问题中了解到：Styling mat-select in Angular Material面板的宽度总是等于select元素的宽度，但我的情况并非如此。如果下拉的大小不同，有没有办法确定下拉的宽度？
浏览 12提问于2021-06-24得票数 0
如何在angular中清除angular下拉列表值？使用x按钮或清除按钮清除所选内容？谢谢。
代码
<div fxFlex fxLayout="row" formGroupName="people">
<mat-form-field appearance="outline" class="pr-4" fxFlex>
<mat-label>People</mat-label>
<mat-select formCo
浏览 38提问于2020-05-13得票数 0
回答已采纳
我有一个下拉列表，我想得到选定的项目文本，所以这里是stat.REGION_NAME，而不是打字本中的值。我使用了selectionChange，但是只获取值，而不是项目文本。
<mat-form-field>
<mat-label>Link Region Code</mat-label>
<mat-select placeholder="Select Link Regions" name="linkregion" [(ngModel)]="linkregion" (selectionChange
浏览 1提问于2021-05-19得票数 0
回答已采纳
我有两个下拉列表。我想要启用第二个下拉列表，只有当用户选择了第一个下拉列表。(Angular版本: 6) HTML代码：
<mat-form-field>
<mat-select placeholder="Favorite food" >
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option
浏览 7提问于2018-09-10得票数 1
大家好，我是angular中的乞讨者，我想在angular材料中创建一个下拉列表，并将其绑定到节点js中的数据源，我的html代码是： <mat-form-field appearance="fill" class = "tp-full-width" >
<mat-label>product desc</mat-label>
<mat-select >
<mat-option *ngFor="let p of list_product" [value
浏览 27提问于2021-04-25得票数 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
回答已采纳
4回答
我的HTML
<mat-form-field class="button-spacing">
<mat-select placeholder="select" [(ngModel)]="dropDownOne">
<mat-option *ngFor="let first of test1" [value]="first"> {{ first }}
</mat-option>
</mat-select>
</mat-form-fiel
浏览 0提问于2019-02-12得票数 1
回答已采纳
1回答
如何在angular中创建3级下拉选项。我们可以利用角度材料吗？
<h4>mat-select</h4>
<mat-form-field>
<mat-label>Pokemon</mat-label>
<mat-select [formControl]="pokemonControl">
<mat-option>-- None --</mat-option>
<mat-optgroup *ngFor="let group of pokemonGr
浏览 3提问于2019-06-08得票数 1
我有一个Angular 8应用程序，我正在使用材料。 我想要确定的是，来自后端的数据将被填充到下拉列表中。 api调用的代码如下所示： returnQrCodes$ : Observable<QRCodeDefinitionSelectOptionApi[]>; 接口调用： getQrCodes(){
this.returnQrCodes$ = this.qrDefinitonService.getDefinitionForSelection().subscribe(result => {
console.log(result);
})
}
浏览 21提问于2019-10-09得票数 0
回答已采纳
1回答
我的代码：
<mat-select
[formControl]="Rooms" [(ngModel)]="dropdown"placeholder="ChooseRooms"multiple>
<mat-option *ngFor="let room of RoomList" [value]="room">
{{room}}
</mat option>
</mat-select>
<mat-select
[formControl]="devi
浏览 2提问于2020-01-16得票数 2
我在模型类中使用了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
回答已采纳
我是Angular的新手，我正在使用Angular Material。我得到了mat-select的跟随错误。我的代码如下 <mat-form-field>
<mat-select placeholder="Owner Type">
<mat-option value="Individual">Individual</mat-option>
<mat-option value="Corporate">Corporate</mat-option&
浏览 196提问于2019-02-25得票数 0
1回答
角度垫-选择不拾取默认值
、、、
我有一个数组对象，其形式为
interArray = [{key: "0", value: "1949"},
{key: "1", value: "2919"},
{key: "2", value: "4009"},
{key: "3", value: "6119"},
{key: "4", value: "7649"},
浏览 0提问于2021-04-07得票数 0
2回答
TS代码：
import {Component} from '@angular/core';
import {MatTableDataSource} from '@angular/material';
/**
* @title Basic use of `<table mat-table>`
*/
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: '
浏览 0提问于2019-01-17得票数 3
回答已采纳
1回答
我从Angular material (TS)实现了Mat-Select，并注意到了有趣的行为。下拉列表不会打开，直到点击mat-select的底线，我知道当我以前使用Mat-select字段时，当我点击字段上的任何位置时，它是打开的。有什么问题吗？
<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [formControl]="toppings" multiple>
<mat-option *ngFor="let
浏览 5提问于2019-11-14得票数 0
我正在构建一个角度应用程序，其中我有两个下拉。如果选择的第一个下拉列表是“角”，则应该为第二个下拉列表启用多选择。以下是有关档案：
HTML：
<mat-form-field>
<mat-label>Topic</mat-label>
<mat-select [(ngModel)]="topic">
<mat-option value="ang" (click)="onTopicClick()">Angular</mat-option>
浏览 2提问于2021-03-11得票数 0
3回答
我试图填充一个数组的所有选定的值从一个垫-选择下拉。目标是为每个选定的值创建一个输入字段，如下所示：
每次我选择一个值时，我都想调用一个方法，但我不确定下一步该做什么.这就是我所拥有的：
MyComponent.component.html
<mat-form-field>
<mat-select placeholder="Products" [formControl]="products" multiple>
<mat-option *ngFor="let product of productsList
浏览 0提问于2019-03-01得票数 1
回答已采纳
2回答
我想通过扩展角材料组件mat-select来创建自己的选择组件，并使用我的自定义app-select组件，如下所示
<app-select>
<mat-option>Value1</mat-option>
<mat-option>Value2</mat-option>
<mat-option>Value3</mat-option>
<mat-option>Value4</mat-option>
</app-select>
我在stackblitz中做了一个例子
浏览 0提问于2019-06-19得票数 4
我有两个多选的下拉列表。 <mat-form-field>
<mat-select [formControl]="FirstFormControl" multiple>
<mat-option (onSelectionChange)="selectA($event) *ngFor="let msj of filter?.msj" [value]=msj>{{msj}}
</mat-option>
</mat-select>
</mat-form-field>
浏览 14提问于2019-02-06得票数 1
回答已采纳
我是Angular6的新手，我想知道是否有一种简单的方法来做我想做的事情。
我刚刚阅读了文档，但我没有读到任何关于它的东西，有没有一种简单的方法来对下拉列表中的值进行排序？
<mat-form-field>
<mat-select placeholder="Code List" required [(ngModel)]="contextScheme.codeListId">
<mat-option *ngFor="let codeList of codeLists" [value]=
浏览 16提问于2018-08-22得票数 2
我使用的是angular 8，并在下拉字段中实现了过滤器。但我不知道怎样才能把搜索栏固定在垫子选择的顶部。
Html
<h4>mat-select</h4>
<mat-form-field>
<mat-label>State</mat-label>
<mat-select>
<input (keyup)="onKey($event.target.value)">
<mat-option>None</mat-option>
<ma
浏览 2提问于2020-08-10得票数 1
我想创建一个下拉列表，为此我需要添加<&tag。当我开始做我的项目时，我得到了这个错误。我不明白哪里做错了。请纠正我哪里错了。
error NG8001: 'mat-select' is not a known element:
1. If 'mat-select' is an Angular component, then verify that it is part of this module.
2. If 'mat-select' is a Web Component then add 'CUSTOM_ELEMENT
浏览 1提问于2020-08-25得票数 1
我在我的应用程序的首页中使用了角6和角材料，我有一个名为Roles的模块，它有一个与它相关的权限集合，在角色页面上，我有一个编辑按钮，在单击它的id检索角色时，角色有一个与它相关的权限集合，如下面的图像所示：
当我单击“编辑”按钮时，会出现一个弹出窗口，它是一个有角的材料形式，在其他字段中，它有以下字段：
<div>
<mat-form-field class="form" floatPlaceholder="never" shouldPlaceholderFloat="false">
<mat-
浏览 0提问于2019-03-09得票数 2
回答已采纳
我正在创建angular 7 web应用程序，并使用一个mat-select下拉菜单和一个mat-paginator。现在我隐藏垫-选择向下箭头。 Here is the mat-select docs. ? //hide down arrow
::ng-deep .mat-select-arrow {
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 0px solid transparent;
border-top: 5px solid;
margin: 0 4px;
} 在这个问题出现
浏览 16提问于2019-12-05得票数 1
回答已采纳
我是angular2的新手。我用angular2准备了我的UI，它有一些下拉列表和文本框。现在，我需要将这些数据(对象)发送到服务，以便在MVC6中存储permanently.How。有人能帮帮我吗？
浏览 1提问于2016-12-16得票数 0
我想在用户按任何键时执行typescript中的函数。例如，如果下拉菜单包含“Apple”、“Pineapple”、“Mango”等值，并且用户按下“M”，则焦点应按照标准的HTML行为转到“Mango”。is：的标准HTML行为
我已经在html代码中添加了(keypress)到mat-select。但是按键似乎不起作用，因为typescript函数中的代码没有被执行。Angular版本是4。
下面是angular代码：
<mat-form-field>
<mat-select (keypress)="selectKeyPress($event)"
浏览 0提问于2018-11-21得票数 2
2回答
自动完成搜索下拉列表角度
、、、、
我有一个获取json数据的下拉列表。我通过get all API获取数据。所以我还没有硬编码任何数据，我是在angular中实现的
<td>
<mat-form-field>
<mat-label>Customer</mat-label>
<mat-select formControlName="custom">
<mat-option *ngFor="let customer of customerList" [value]="customer.id
浏览 0提问于2020-10-22得票数 1
我是angular的初学者，在我的项目中我有两个下拉列表，第一个下拉列表：
<mat-form-field appearance="fill" class = "tp-full-width">
<mat-select #captionlist2 (selectionChange)="filterByCaption($event)">
<mat-option *ngFor="let p of list_product.data" [valu
浏览 15提问于2021-05-27得票数 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
回答已采纳
我使用angular6/mat-dialog-modal同步呈现多选/单选下拉值(已经从api接收到的数据)。表单按预期工作，但当用户单击实际的选择下拉列表以及尝试选择下拉列表中的一项时，性能会非常慢。对于特定的选择字段，某些选项可以多达500-1000项。任何帮助都将不胜感激。
示例数据(this.data)
[ // less than 30 objects in this array
{
id: "company1",
label: "Amazon",
state: {
options: [ // could be 5000+
浏览 16提问于2019-10-28得票数 0
我是Node的新手，我正在尝试使用。问题是，一旦下拉列表打开，它就无法关闭(通过单击页面的另一个区域)，第二个问题是下拉列表不适合放置在其中的引导网格中。下面是打开的下拉列表的图片。
下面是我的package.json文件夹中的物质依赖行(显然还有其他依赖项)。
"@angular/material": "^5.2.5",
"@angular/animations": "^5.2.10",
"@angular/cdk": "^5.2.5",
"hammerjs": "
浏览 0提问于2018-04-21得票数 1
回答已采纳
我正在尝试将办公室显示到一个下拉选择元素。我已经检查/验证了我的api返回了正确的数据。然而，在我的angular组件(ts和html)文件中，我无法显示它。 模型文件 export interface Office {
id: string;
name: string;
sections: Array<Sections>;
}
export interface Sections {
id: string;
name: string;
code: string;
} 服务文件 getOffices() {
return this.http.get&l
浏览 28提问于2019-04-12得票数 0
我通过angular 6从web api中检索数据。 我创建了一个具有在组件构造函数中调用的fetch函数的服务，该函数将在同一页面上被多次实例化。 我的问题是，每次实例化我的组件时都会调用该服务。 例如，我的代码如下所示： 服务： import { Injectable } from '@angular/core';
import { Article } from '../../Classes/article'
import { Observable } from 'rxjs';
import { MessageService } from
浏览 31提问于2018-12-27得票数 1
回答已采纳
1回答
我正在构建一个使用Angular + Typescript的web应用程序。我有ASP.NET核心Web API，我有两个组件，一个是员工，另一个是部门。我想做一个下拉列表，这样如果我选择了IT部门，我就得到了这个部门的所有员工。我在employee表中声明部门为外键。
Html代码
<div class="example-button-row">
<mat-label>{{'::Departement' | abpLocalization}}</mat-label>
<mat-select id=
浏览 0提问于2021-01-12得票数 0
我使用的是angular 7和material，其中我使用了一个select元素来实现下拉功能，比如-
<mat-select placeholder="Select">
<mat-option *ngFor="let listData of List; let m = index" (onSelectionChange)="onChanged($event,listData )" **[value]='listData ?.id'** >
{{ listData.name }}
<
浏览 0提问于2020-02-22得票数 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
1回答
我有一个称为应用程序的下拉列表和另一个称为导航的下拉列表。所有导航项都具有相应的应用程序id，可以根据第一个下拉列表中选择的应用程序对其进行筛选。
如何将应用程序ID从应用程序下拉列表传递给导航组件？
我尝试使用@Input('value') appId: number；在navigation.component.ts中从应用程序组件中获取app.Id，但是它没有工作。
这是我的代码：
app.component.html
<app-application></app-application>
<br/>
<app-navigation
浏览 1提问于2018-10-31得票数 0
回答已采纳
我在材料垫选择初始选择框中遇到问题，因为“下拉”菜单的宽度与垫选择面板中的选项的大小相同。我以前有一个简单的jQuery选择框，占位符有一个宽度，选项/选项有一个单独的宽度。它似乎是自动完成这项工作的。我现在在选择Angular 6材料时遇到了问题，因为它有不同的宽度。首先，我花了很长时间才弄明白如何改变宽度。我最终通过使用以下命令更改了它
Angular HTML：
<div id="selectionList">
<mat-form-field>
<mat select [ngclass]="{'selection-
浏览 0提问于2018-09-13得票数 0
1回答
我有角材料的mat-select下拉。
它有来自API的状态列表。它有10种以上的下拉选项。
Todo :
我想要mat-select中的搜索选项，.I使用的是stackblitz中的mat-select search，但是它真的很难理解。
请给我一个简单的方法。
我的json代码
"{
"data": [
{
"id": 32,
"name": "Andaman And Nicobar Islands"
},
{
"id": 16
浏览 1提问于2019-03-25得票数 1
回答已采纳
请找到我下面的stakblitz链接。 https://stackblitz.com/edit/angular-sbkgbf 我在每个下拉列表的左侧放置了一个按钮，以打开相应的下拉列表。我通过@ViewChild创建mat-select的引用，以编程方式打开了下拉列表。我这里的问题是，只有ABCD下拉菜单会为所有的按钮点击打开。但是，当我尝试通过单击直接打开下拉列表时，我可以分别打开每个下拉列表。所以我可以理解，对于所有在for...loop中创建的mat-option，在typescript中都有相同的引用。我将如何为它们中的每一个创建单独的引用，以便当我单击按钮时，打开相应的下拉列表。或
浏览 17提问于2020-03-31得票数 0
8回答
我在我的Angular应用程序中使用了mat-select。我想更改文本的颜色，但颜色不变。
<mat-select style="color: red" [(ngModel)]="someValue">
<mat-option>class="empty-select"</mat-option>
<mat-option class="not-empty-select" *ngFor="let unit of units [value]="unit">{
浏览 0提问于2018-10-15得票数 14
我有有限的CSS/SCSS技能，但需要改变标准的Creative Tim Angular Pro材料模板。
有没有人能给我举个例子，说明需要改变的是什么？(无论是在HTML中，还是在Creative Tim堆中的许多CSS文件中)。
我从同一个项目中获取了多选下拉列表代码。
src/app/forms/extendedforms
从extendedforms.component.html (第49-55行)：
<mat-form-field>
<mat-select multiple placeholder="Multiple Cities&#
浏览 13提问于2019-11-28得票数 0
我无法用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
回答已采纳
如何正确显示图标内的选择下拉控件使用材料选择控件。选择mat选项后，其图标的选择文本以及如何克服这个问题？
<mat-form-field>
<mat-select formControlName="genderFormControl" placeholder="Gender">
<mat-option>None</mat-option>
<mat-option *ngFor
浏览 0提问于2018-09-16得票数 15
1回答
我有一个数据列表，我已经显示在下拉列表中。下拉的html：
<div class="col-md-6">
<mat-form-field>
<mat-select placeholder=" oraganization " formControlName="organization">
<mat-option>None</mat-option>
<mat-option *ngFor="let org of orgList" [va
浏览 0提问于2018-07-13得票数 1
1回答
我是Angular的新手，使用mat-select模块创建了一个下拉菜单。虽然我可以创建dropdown，但mat-options并不在dropdown选择器的中心。选择器位于页面的顶部，选项显示在页面的最底部。下面是我的代码： <mat-form-field appearance="fill">
<mat-select [(ngModel)]="sortType" (ngModelChange)="applyFilter()">
<mat-option va
浏览 30提问于2020-10-31得票数 1
如何修复它，使其工作，想要使用角材料下拉查看在每一个选择一个“公司名称”从sql server我想绑定下拉选择，它将让我选择我已经导入的公司名称。
TS-
HTML-
组件：
import { Component, OnInit } from '@angular/core';
import {MatPaginator, MatTableDataSource,MatSort} from '@angular/material';
import { User } from 'src/app/services/user.model
浏览 1提问于2019-09-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
