根据另一个mat-select的值显示不同的mat选项
是一个前端开发中常见的需求，可以通过Angular框架中的ngIf指令来实现。
具体步骤如下：
- 在HTML模板中，使用mat-select组件来创建一个下拉选择框，并绑定一个变量来保存选中的值。例如：
<mat-form-field>
<mat-label>选择类型</mat-label>
<mat-select [(ngModel)]="selectedType">
<mat-option value="option1">选项1</mat-option>
<mat-option value="option2">选项2</mat-option>
<mat-option value="option3">选项3</mat-option>
</mat-select>
</mat-form-field>- 根据选中的值，使用ngIf指令来动态显示不同的mat选项。例如：
<mat-form-field>
<mat-label>选择内容</mat-label>
<mat-select [(ngModel)]="selectedContent">
<mat-option *ngIf="selectedType === 'option1'" value="content1">内容1</mat-option>
<mat-option *ngIf="selectedType === 'option2'" value="content2">内容2</mat-option>
<mat-option *ngIf="selectedType === 'option3'" value="content3">内容3</mat-option>
</mat-select>
</mat-form-field>在上述代码中，根据selectedType的值来判断显示哪个mat-option。当selectedType的值改变时，ngIf指令会重新计算条件并决定是否显示对应的mat-option。
这样，根据另一个mat-select的值显示不同的mat选项的需求就得到了满足。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。
腾讯云云服务器（CVM）是一种可弹性伸缩的云计算服务，提供高性能、可靠稳定的云服务器实例，适用于各类应用场景。
腾讯云云数据库MySQL是一种高性能、可扩展的关系型数据库服务，提供了稳定可靠的数据库解决方案，适用于各类业务场景。
更多关于腾讯云云服务器和云数据库MySQL的详细信息，请访问以下链接：
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL：https://cloud.tencent.com/product/cdb_mysql
相关·内容
1回答
给定以下使用mat-select的Angular组件
export enum AllValues {
VALUE_A = "A",
VALUE_B = "B",
VALUE_C = "C",
}
@Component({
selector: 'my-app',
template: `
<mat-form-field>
<mat-select ([ngModel])="myValue">
<mat-option *ngFor=&#
浏览 0提问于2018-02-21得票数 3
回答已采纳
3回答
我有一个mat-select下拉列表，并启用了多个，并使用NgModel来存储用户选择的值。
问题是，当我导航到另一个页面并返回时，用户选择的值不在mat-select中。我知道ngModel有这些值……我遗漏了一些东西……
HTML
<mat-form-field>
<mat-select placeholder="Customers" name="customerDetails" ngDefaultControl
formControlName="customerDetails" [(ngModel)]=&
浏览 4提问于2017-10-10得票数 8
我有一个公司级，它有一个总部的地址字段。地址是一个接口，它有另一个对象，即国家，这是另一个接口。在我的数据库里我存储了所有的国家。我有一个编辑选定的公司的观点，在那里我可以设置或更改总部的地址，我为这些国家创建了一个mat-select：
<mat-select [(ngModel)]="company.headquarter.country">
<mat-option *ngFor="let country of companyService.countries" [value]="country">
浏览 1提问于2018-03-26得票数 4
回答已采纳
我们必须在mat-expansion-panel中显示一个表单。表单中有多个字段，对于其中几个字段，我使用mat-select，对于另外几个字段，我使用mat-input。
在扩展面板中，matInput工作正常，但mat-select没有显示用于选择可能值的选项。
尽管mat-select在正常显示时工作正常。
<mat-expansion-panel>
<mat-expansion-panel-header>
Heading 1
</mat-expansion-panel-header>
浏览 8提问于2018-01-25得票数 6
1回答
席-选择值不显示
、、
我有一个view，我的Angular Components，一个mat-select。此Angular Component有一个用于编辑某些数据的表单。所以，当我打开组件视图时，表单是预先填充的。
<mat-form-field>
<mat-select
[(value)]="selectedGroups"
placeholder="Select the associated Bitbucket groups ..."
multiple>
浏览 0提问于2018-10-09得票数 0
我在一个子组件中使用mat-select代码，并传递输入以显示和隐藏错误。下面是我的代码，
<mat-form-field>
<mat-select [formControl]="ctrl" [placeholder]="placeholder">
<mat-option *ngFor="let option of options" [value]="option">
{{ option }}
</mat-option>
浏览 0提问于2020-10-09得票数 0
<mat-select formControlName="adviserNationality">
<mat-option *ngFor="let res of adviserNationalityRes" [value]="res">
{{res['nationality']}}
</mat-option>
</mat-select>
如何在ngAfterViewInit方法中设置value="res“
浏览 3提问于2020-06-25得票数 0
我创建一个对话框来插入数据：
这是html页面：
<input type="hidden" ngModel="{{au.id}}" name="id">
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput [(ngModel)]="au.name" name="name">
</mat-form-field>
<br />
<mat-form-fie
浏览 2提问于2020-12-16得票数 0
回答已采纳
1回答
我对角质很陌生。我很难理解mat-选择和mat选项元素的功能。
我希望我的垫子-选择只在点击时获取数据。但是现在我必须点击两次才能让列表出现，我真的不明白为什么。如果有人知道的话我会很感激的。
My：
<mat-select placeholder="Aircraft Family" [(ngModel)]="aircraftFamily" (click)="loadFamilies()">
<mat-option *ngFor="let myAircraftFamily of aircraftFamilies&
浏览 0提问于2018-03-05得票数 2
我是playwright的新手，我试图获得选定的选项值，并使用Playwright将其更改为包含mat-select元素的mat-form-field的另一个选项。
我试过了
await page.selectOption('select#colors', { label: 'Blue' });
例如，selectOptions在mat选择元素上不起作用
<mat-form-field>
<mat-select id="selectColor" [formControl]="colcorselect" (clic
浏览 64提问于2021-07-19得票数 1
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
回答已采纳
4回答
我有Mat-select下拉菜单，如下所示
<mat-form-field>
<mat-label>Gender</mat-label>
<mat-select id="gender" required formControlName="gender">
<mat-option id="Male" value="male"> Male </mat-option>
<mat-option value=&
浏览 0提问于2019-06-10得票数 16
我有两个选择，基于从一个select中选择的值，我在第二个select上过滤数据，如果需要的话，我还可以选择添加相同的表单，我的问题是如果我从第二个行数据(filteredcarPartsSub)中从第一个更改中选择值的话。如何才能只对当前行执行selectionChange操作？
.html
<mat-select #multiSelect formControlName="cat" name="cat" (selectionChange)="onChange($event); getCarPartsSubCategory($ev
浏览 2提问于2022-02-09得票数 -1
我正在使用angular mat-select来显示来自WebAPI的列表。它正确地显示了我从"zone“表(Zoneid，Zname)中需要的内容。在提交时，我保存Zoneid (操作表上的外键)。
1-使用所有区域填充mat-select :工作(在创建或编辑模式下)
2-在编辑时:当我从mat-table列表中选择要编辑的“操作”(从操作表)行时，表单加载对象并使用所有值设置控件(输入文本)。除了mat-select组件没有设置值，我打开了mat-select，它显示了所有的区域列表(就像我之前说的那样)，似乎mat-select没有将saved..when id映射到它的Nam
浏览 0提问于2020-05-22得票数 0
1回答
我正在使用Angular Material Select来显示假日。当用户选择一个假日时，我希望显示日期而不是假日名称。例如，如果用户选择“圣诞节”，我希望选择的值应该显示为“12月25日”。
<mat-form-field>
<mat-select [(ngModel)]="selectedHoliday" placeholder="Select A Holiday" (change)="eventSelection($event.value)">
<mat-option *ngFor="let
浏览 0提问于2018-01-09得票数 8
1回答
带复选框的材质选择菜单
、、、
我正在寻找创建一个集成复选框选择菜单。我有3个菜单，第一个选择角色用户，第二个选择用户访问。如果我在第一个菜单上选择admin user，我希望有2个下一个菜单全部选中。但我不能同时选择2个角色用户。 这是我的代码 Ts文件(不是所有代码，只是我需要的部分) fixture_access_list = [];
group_access_list = [];
role_list = [];
form: FormGroup;
formSubmitAttempt: boolean;
isPasswordVisible = false;
浏览 19提问于2019-09-24得票数 0
回答已采纳
1回答
货币转换器数据操作不起作用
、、、、
我正在尝试创建一个类似于Google的货币转换应用程序，即
我面临的挑战是，为了实现上述谷歌转换器，我必须重新处理来自fixer.io的数据。我只能使用fixer.io的以下端点，即。
下面的代码可能会解释得更好一些。我还在这里创建了一个stackblitz ( )
服务
//list endpoint from Fixer.io
currencyRates(): Observable<any> {
return this.http.get(this.baseURL + this.accessKey);
}
TS
//call endpoint and ma
浏览 10提问于2022-02-19得票数 0
2回答
我正在创建一个多个下拉列表(mat-select)的动态表单。select的值是键。在用户选择了所有下拉列表后，我希望显示所选的值。然而，由于select只掌握关键而不是价值，所以我不知道如何实现我的目标。
选项1 -使用id作为值绑定
<mat-form-field appearance="fill" *ngSwitchCase="'dropdown'" class="w-75">
<mat-label>{{question.label}}</mat-label>
浏览 6提问于2021-05-25得票数 0
回答已采纳
如果选择了一个选项，我想显示一个div(mat-card)，如果没有选择其他div，则隐藏它们
模板
<mat-form-field>
<mat-label>Select an option</mat-label>
<mat-select [(value)]="selected">
<mat-option>None</mat-option>
<mat-option value="General notifications">General notifica
浏览 11提问于2020-05-15得票数 1
回答已采纳
我使用的是角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
回答已采纳
我有一个这样的父组件。
<form [formGroup]="validateFormGroup">
<div>
<mat-form-field>
<input matInput placeholder="Name" maxlength="150" formControlName="name" required>
</mat-form-field>
浏览 1提问于2021-03-20得票数 0
回答已采纳
我正在使用反应式表单和角度材料垫选择创建一个表单，并启用多项选择。我有一个要在mat select中加载的对象列表，并希望在默认情况下预先选择该列表中的一些项目。
默认选择可以很好地处理字符串(以下示例中的soda)，默认项显示为选中图标，并且mat select元素值已加载它们，如果我添加更多项，它们将被添加到现有的items in value字段。
但我想要在mat select中加载的项目是对象(下例中的energyDrinks)，当我设置mat select字段的值时，即使字段值设置正确，默认情况下也不会检查它们。另外，如果我添加一个项目，value字段中的现有数据将被新项目覆盖。
有
浏览 19提问于2020-02-23得票数 1
<mat-select required formControlName="country" [(ngModel)]="defaultCountry" placeholder="Country">
<mat-option *ngFor="let key of Object.keys(countryList)" [value]="[key]">{{[key]}}</mat-option>
</mat-select> 我有上面的代码。国家/地区在材料选择中显示良好
浏览 23提问于2019-05-02得票数 0
回答已采纳
1回答
我使用了角度材质选择 <mat-select [(ngModel)]="category"
required>
<mat-optgroup *ngFor="let group of categoryGroups"
[label]="group.name">
<mat-option *ngFor="let category of group.options"
[value]="category.
浏览 14提问于2019-12-17得票数 0
当用户尝试在mat-select中选择另一个值时，我想显示弹出窗口，以确认用户是否确实想要选择另一个值。问题是，我在视觉上显示弹出窗口时，所选值已经出现在mat-select中。在用户决定选择之前，我可以以某种方式阻止此值更改吗？
浏览 1提问于2021-09-02得票数 0
2回答
我有个垫子选的。当我第一次显示表单时，我希望它在加载数据之后选择select中的第一个项。我该怎么做？
<mat-select
placeholder="period"
(selectionChange)="selectperiod($event)"
(ngModel)="(periodoptions)"
>
<mat-option
*ngFor="let p of periodoptions |
浏览 3提问于2020-07-02得票数 1
回答已采纳
1回答
我正在使用Angula9，并且我在ReactiveForm中有一个mat-select输入。我希望在表单外部显示选定的选项，而不是输入值，在相同的html模板内。 我正在做这个： <div class="basic-container">
<mat-form-field>
<mat-label>Category*</mat-label>
<mat-select type="text" aria-label="Number" formControlNam
浏览 32提问于2021-02-01得票数 0
我两次选择，在第一次选择中，我选择了个人客户或组织客户的类型。如果用户选择Ind Customer，我会显示另一个mat-select。然而，问题出在第二个mat-select下拉选项，我想禁用某些输入域。我怎样才能做到这一点呢？
用于选择客户类型的HTML代码
<mat-form-field>
<mat-label>Select Customer Type</mat-label>
<mat-select (onSelectionChange)="getCustType($event)">
<mat-
浏览 0提问于2019-04-08得票数 0
我有一个表格在角度，其中有多个下拉。 下拉1--> <mat-form-field>
<mat-select [(value)]="selected" placeholder="Title"
formControlName="Title">
<mat-option>Title</mat-option>
<mat-option value="Mr">Mr</mat-option>
<mat-option val
浏览 24提问于2019-03-15得票数 0
回答已采纳
3回答
我有一个简单的表格，它的逻辑是：
复选框1(是/否)
选择框2(如果是)选择框3(显示如果是)
只应将显示的选择框设置为required，另一个则不需要。
<mat-select placeholder='Show First Options' formControlName='b' [(ngModel)]="view">
<mat-option [value]="'first'">
First
</mat-option>
<mat-o
浏览 2提问于2017-11-03得票数 1
回答已采纳
1回答
我试图为角多个选择做所有的选择，它对一个选择有效，但是当你有超过一个选择时，我如何使它工作呢？当我为第二个输入添加select all时，它会选择第一个输入上的所有
campaign.ts
@ViewChild('mySel') skillSel: MatSelect;
toggleAllSelection() {
this.allSelected = !this.allSelected;
if (this.allSelected) {
this.skillSel.options.forEach( (item : MatOption) =
浏览 1提问于2021-02-18得票数 0
回答已采纳
我正在使用mat-select，我需要为它设置默认值。它可以工作，但将formControlName添加到其中后，不会显示其默认值。 我尝试了(ngModel)和(value)，以及"mat-autocomplete“ <mat-form-field>
<mat-select placeholder="پیش نمایش"
formControlName="lesson"
[value]="free_demo"
(selectionChange)="onSelectDemo(i
浏览 31提问于2019-07-04得票数 5
回答已采纳
我工作的角度7和我的要求之一，我有创建一个垫-选择与垫图标。我面临的问题是，我要么可以让图标显示，要么可以让选项标签显示，但不能两者都显示。我需要做的是能够连锁的价值，但我得到了一个错误的时候，我尝试。
垫子的选择被设置为-
<button mat-raised-button type="button" name="button" color="primary" class="roundedButton">
<mat-select [(value)]="selected2">
浏览 13提问于2019-10-02得票数 1
回答已采纳
1回答
我试着用角材料来实现角的级联下降。
但我无法接受相应的值。
有人能帮我吗？
<mat-form-field>
<mat-select [formControl]="country" placeholder="select"
#singleSelect>
<mat-option *ngFor="let country of countries.Countries"
[value]="domain">
{{country.
浏览 0提问于2019-01-24得票数 0
回答已采纳
即使其中一个字段不是必需的，并且当您不输入它时，表单仍然无效。我试过了，但不起作用。
app.component.html
<form [formGroup]="multiSelectForm">
<div formGroupName="A">
<mat-form-field appearance="outline" >
<mat-label>a1</mat-label>
<mat-select fo
浏览 5提问于2022-04-12得票数 0
我试图显示一个选项卡旁边的下拉列表，用户应该能够点击下拉下拉选项。有没有人能帮个忙，提个主意，我该怎么做到这一点呢?我试着上传stackBlitz，不知何故没能做到。我会提供任何需要的信息。谢谢!！
<mat-tab-group>
<mat-tab
label="PROFILE">
<mat-select placeholder="PROFILE">
<mat-option>address</mat-option>
</mat-select>
浏览 0提问于2018-09-27得票数 0
我有一个多个mat-select，并且想知道已单击的mat-option是否已被选中或取消选择。在触发$event.target时传递的(click)对象没有可以使用的selected属性。
<mat-form-field>
<mat-select [formControl]="control" multiple>
<mat-option
*ngFor="let option of options"
[value]="option"
浏览 1提问于2019-08-14得票数 8
回答已采纳
你好。我使用的是角形6和agular材料，我有一个字符串数组，我在一个mat-select表单字段中显示。如果用户选择一个元素，然后选择另一个元素，我需要跟踪以前的值是什么，新值是什么。
到目前为止，我已经能够使用$event.value获得当前值，但我还没有找到存储或获取以前值的方法。
<mat-select placeholder="Choose..." (selectionChange) ="checkTitle($event.value);">
<mat-option *ngFor="let op
浏览 2提问于2019-08-15得票数 5
回答已采纳
3回答
如何制作角质材料所需的下拉列表？
、、、、
我有一个有棱角材料的搜索“表格”。但这不是一个带有提交按钮的表单。但只要一个按钮。就像这样：
<button mat-raised-button color="accent" class="Button" (click)="searchFor()">Filter</button>
我有个下拉列表。但我想让下拉列表成为必需的。
如下所示：
<div class="search-select searchstatus" *ngIf="selectedSearch && has
浏览 9提问于2019-10-16得票数 0
回答已采纳
作为用户，当我从键盘键入选项时，滚动条不会定位在突出显示的项目上。另外，当我选中该复选框时，滚动条会滚动到其他位置，而不是停留在选定的选项上。
代码是
<form >
<mat-form-field appearance="outline" floatLabel="never" class="some-class">
<mat-select #multiselect [compareWith]="somefn" disableOptionCentering="true&#
浏览 0提问于2019-07-18得票数 3
2回答
我有一种方法可以获得下拉列表中所选值的文本，而不是以反应性形式获取值？
我的脚本如下：
<form [formGroup]="formGroup" formArrayName="test">
<ng-container matColumnDef="fr" formArrayName="test">
<th mat-header-cell *matHeaderCellDef> Family Rel. </th>
<td ma
浏览 2提问于2018-12-05得票数 3
我有一个mat-选择下拉菜单在角5。我想有一个“其他”选项，如果选择，显示一个文本字段与手动输入。我怎样才能做到这一点？我的想法是处理另一个ngModel布尔字段，该字段允许*ng-如果显示文本字段，但是即使它能够工作(我不知道如何工作)，它看起来也不太优雅.
<mat-form-field>
<mat-select [(ngModel)]="regime" name="regime-input">
<mat-option [value]=1>daily</mat-option>
浏览 1提问于2018-03-10得票数 1
回答已采纳
我如何才能实现以下目标：
<mat-select formControlName="ctrlName">
<mat-option *ngFor="let opt of options" [value]="opt.key">
{{opt.label}}
</mat-option>
</mat-select>
<div *ngIf=" SHOW IF A CERTAIN OPTION FROM THE LOOPED LIST ABOVE IS SELECT
浏览 0提问于2018-08-09得票数 3
希望在mat select中显示字符串数组。mat-select应该将数据显示为预选(多个)格式。通过单击它，应该显示选项，但不应该进行任何更改。mat-select是mat表条目的一部分，应该仅是在html-模板代码中定义的视图单元格(不应该更改表-数据源的数据)。
以角度材料选择文档为例，但如果不手动选择数据，甚至无法获得它来显示数据。
<ng-container matColumnDef="letters">
<th mat-header-cell *matHeaderCellDef>Letters</th>
<td ma
浏览 0提问于2019-08-14得票数 0
回答已采纳
数据(json)
{
"time": [
"2017-1",
"2017-2",
"2017-3",
"2017-4",
"2017-5",
....
]
}
模板(角质材料)
<mat-tab label="Recomandation Setting">
<div class="row">
<div class="col-md-4">
浏览 1提问于2018-11-29得票数 1
回答已采纳
我有两个选择；第一个是你在不同大洲之间选择的。第二个mat-select选项包含国家/地区选项。我的问题是，例如，如果我在第一个mat-select中选择亚洲作为我的选项，我只希望亚洲国家在第二个mat-select中显示为选项，而不是其他国家。 <div class="form">
<mat-form-field>
<mat-label>Continents</mat-label>
<mat-select>
<mat-option *ngFor="let continent of fo
浏览 43提问于2021-10-29得票数 0
回答已采纳
2回答
无法为角材料中的下拉设置默认值
、、、、
我在角材料中使用mat-select，如下所示：
<mat-form-field class="full-width">
<mat-select (selectionChange)="dropdownSelectedItem($event)">
<mat-option *ngFor="let item of itemList" [value]="item">
{{item.name}}
</mat-option>
</mat-se
浏览 0提问于2021-01-08得票数 0
回答已采纳
在我的service.ts中有这个函数
public getUploadPeriod(){
let baseYear = 2020;
let currYear = new Date().getFullYear();
let years = [];
for (var i = baseYear; i <= currYear; i++) {
years.push(i);
}
return years
}
这是我的项目的ts，我试图调用我在service.ts中创建的函数
getUploadPeriod() {
浏览 4提问于2022-06-29得票数 -1
1回答
角模型数据到弹簧pojo类的映射
、、、、
我试着把角度模型类映射到我的弹簧模型类。但是，在spring类中，它显示了所有实体的空值。下面是我以前做过的代码，但是它无法将角模型数据映射到spring类。
HeaderMappingDetails.java
public class HeaderMappingDetails{
String Impressions;
String Clicks;
String Revenue;
//getters and setters
}
headermappingdetails.ts
export class HeaderMappingDetails{
publi
浏览 0提问于2018-08-10得票数 0
回答已采纳
1回答
在我的计算器上，我有一个有棱角的材料形状的字段，它们看起来是这样的：
<mat-form-field appearance="outline" class="mr-5">
<mat-label>{{'INP.pipeTypeForm'|translate}}</mat-label>
<mat-select [formControl]="pipeTypeMeasureControl">
<mat-option *ngFor="let pipeType of
浏览 7提问于2022-04-14得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
