设置值后，角度材料mat-select不刷新
问题描述： 在设置值后，角度材料mat-select不刷新。
解答： 角度材料(mat-select)是Angular Material库中的一个组件，用于创建下拉选择框。在设置值后，如果mat-select不刷新，可能是由于以下几个原因：
- 数据绑定问题：确保你的mat-select与数据模型正确绑定。可以使用[(ngModel)]指令或[formControl]指令来实现数据绑定。确保在设置值后，数据模型的值已经更新。
- 变更检测问题：Angular使用变更检测机制来检测数据模型的变化并更新视图。如果在设置值后，mat-select没有刷新，可能是因为变更检测没有触发。可以尝试手动触发变更检测，使用ChangeDetectorRef服务的detectChanges()方法。
- 异步数据更新问题：如果设置值是在异步操作中进行的，可能需要手动通知Angular更新视图。可以使用ChangeDetectorRef服务的markForCheck()方法来标记组件需要进行变更检测。
- 刷新选项列表问题：如果设置值后，mat-select的选项列表没有刷新，可能是因为选项列表的数据源没有更新。确保在设置值后，重新加载或更新选项列表的数据源。
总结： 在设置值后，角度材料mat-select不刷新可能是由于数据绑定问题、变更检测问题、异步数据更新问题或刷新选项列表问题导致的。通过检查数据绑定、手动触发变更检测、通知Angular更新视图以及更新选项列表的数据源，可以解决这个问题。
推荐的腾讯云相关产品： 腾讯云提供了丰富的云计算产品和服务，包括云服务器、云数据库、云存储等。对于前端开发、后端开发、数据库、服务器运维等需求，可以使用腾讯云的以下产品：
- 云服务器（CVM）：提供弹性计算能力，支持多种操作系统和应用场景。详情请参考：腾讯云云服务器
- 云数据库MySQL版（CDB）：提供稳定可靠的云数据库服务，支持高可用、备份恢复等功能。详情请参考：腾讯云云数据库MySQL版
- 云存储（COS）：提供安全可靠的对象存储服务，适用于存储和处理各种类型的数据。详情请参考：腾讯云云存储
以上是腾讯云的一些相关产品，可以根据具体需求选择适合的产品来支持云计算和开发工作。
相关·内容
3回答
我正在做一些简单的形式转换它从引导到材料。 尽管我使用的是Angular 6，但表单在提交时是老式的(不使用angular表单) <form method="post" action="http://api.example.com/submit" id="user_form">
<mat-form-field>
<input matInput placeholder="name" name="username">
</mat-form-field
浏览 23提问于2018-12-30得票数 1
回答已采纳
我用的是角v6的角度材料。当我在HTML文件中使用它的时候。我遇到了这样一个错误：
ERROR TypeError: _this._driver.validateStyleProperty is not a function
摘录自我的角度材料模块：
MatFormFieldModule,
MatInputModule,
MatSelectModule
HTML用法：
<mat-form-field>
<mat-select placeholder="Select item">
<mat-option *ngFor=&#
浏览 2提问于2018-07-18得票数 2
回答已采纳
我已经实现了一个材料垫-选择下拉在我的角反应应用程序，并希望突出显示默认项目。我可以使用css显示一个复选标记来显示默认项，但不能将其高亮显示为选定的值(蓝色条)。我将isDefault值赋值为true，但它似乎不起作用。默认项具有一个属性isDefault，其布尔值= true
<mat-form-field [floatLabel]="'never'">
<mat-select placeholder="select" formControlName="name" >
浏览 1提问于2021-12-06得票数 0
TL；博士:我已经有了可行的解决方案，但是我想要解释一下为什么mat的行为是这样的。
在用角度材料构建应用程序时，我在模板中使用mat-select和*ngFor组合时遇到了这个错误：get priorities函数被连续调用，就像无限循环中的get priorities函数，浏览器冻结了。
组件
get priorities() {
return [
{ name: 'NORMAL', value: 100 },
{ name: 'HIGH', value: 200 },
{ name: 'FOR
浏览 8提问于2021-10-20得票数 1
4回答
一旦下拉列表的值被更改，我想调用一个函数。
我是在没有角度材料的情况下这样做的。这是我的ts和html文件。
selected="pending";
getRequests(event: any) {
this.selected = event.target.value;
if(this.selected=="pending")
console.log("Inside Pending Requests")
else
console.log("Inside Granted Reque
浏览 24提问于2022-11-02得票数 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
回答已采纳
我从棱角材料中选择了多个。
<mat-form-field>
<mat-select placeholder="Toppings" [formControl]="toppings" multiple>
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>
浏览 0提问于2019-02-04得票数 0
回答已采纳
我正在使用角材料和角度谷歌地图。我有一个角度的材料形式，在时髦-信息窗口，这是很好的正常工作模式。它显示垫-选择很好，但当我点击全屏按钮，垫选项，在垫-选择，不显示。一旦我走出全屏模式，我就会看到选项面板。
这是个窃听器还是我漏掉了什么。如果我使用本机select而不是mat-select，下拉选项就会显示出来。
正规模式
全屏模式
在谷歌地图的全屏模式下，mat-select不显示面板，但当我检查它时，它就在那里。
浏览 0提问于2018-12-19得票数 6
使用角2和角材料6.4.7
我需要设置一个默认的选择选项使用mat-select组件。
下面的代码按其应有的方式工作，并在我不使用formControl绑定时设置默认值。
例子如下：
<mat-form-field>
<mat-select [(value)]="currentYear" placeholder="Select A Year" [formControl]="year.get('year')" >
<mat-option *ngFor="let y of
浏览 2提问于2019-01-25得票数 2
回答已采纳
在下拉列表中添加disableOptionCentering="true“时出现此错误:无法绑定到'disableOptionCentering‘，因为它不是已知的'mat-select’属性
最新版本:角度和材质都是5。
问题陈述:试图解决下拉列表在标签上重叠的问题。我已经在柱塞上试过了，我想知道应该用什么样的角度材料。
工作示例：
什么版本的材料或角度，我需要使用这个工作，或我错过了其他一些重要的模块。
浏览 0提问于2018-11-01得票数 1
回答已采纳
1回答
我正在尝试获得角度材料选择，使之看起来像基本下拉。我们应用了disableOptionCentering，仍然可以看到下拉列表选项从左侧和右侧展开(见下面的图片)。理想的画面应该有左右两边的瘦身，该如何进行呢？
<h4>Basic mat-select</h4>
<mat-form-field appearance="outline">
<mat-label>Favorite food</mat-label>
<mat-select disableOptionCentering>
<
浏览 0提问于2019-11-29得票数 0
回答已采纳
我有一个材料多个选择，我在那里设置有条件的，这是TS文件中的默认值。我还使用onSelectionChange来检测select中的更改。问题是，当我设置被触发的onSelectionChange默认值时，如何防止这种情况发生？
<mat-select [compareWith]="compareWithFunc" [(value)]="hidden" multiple>
<mat-option
*ngFor="let value of values"
(onSelectionChange)="on
浏览 1提问于2020-04-06得票数 0
2回答
我使用角8，角材料和反应形式。
我的表单是使用垫子选择，并从数组中获取其选项。当我创建一个新的对象时，它可以正常工作，并且这些选项将按预期显示。但是，当编辑此对象(使用相同的形式)时，由于某些原因，它不会抓取对象值。
例如:我有一个带有id、firstName和lastName的医生数组。
{
id: 4,
firstName: Jimmy,
lastName: Jones
}
席形场看起来是这样的：
<form fxLayout="column" [formGroup]="patientForm">
<mat-form-field
浏览 2提问于2020-09-15得票数 0
回答已采纳
1回答
我第一次尝试角质材料，当我用ngx测试mat-select时，它没有更新语言，直到重新点击输入才会生效。
框架支持本地化/翻译吗?还是我使用错了？
代码：
<mat-form-field>
<mat-select placeholder="City" [formControl]="city">
<mat-option *ngFor="let city of cityList" [value]="city.id">
{{city.name | translate
浏览 0提问于2017-10-21得票数 4
.html
<div class="column">
<div>
<mat-form-field>
<mat-label>Subject</mat-label>
<mat-select formControlName="Subject">
<mat-option *ngFor="let Subject of Subjects" [value]="Subject.value
浏览 5提问于2020-07-22得票数 0
1回答
我使用mat-select material和Angular5。我陷入了无法将值绑定到mat-select中的*ngfor的问题中。
这些值是从rest API响应中获取的，我将其赋值给mat select中分配给ngfor的值。当我对其进行控制台操作时，我可以看到这些值，但是在html中，我无法获得该值。
html
<mat-select name="name" [(ngModel)]="nameselected">
<mat-optgroup *ngFor="let name of names" [label]="n
浏览 15提问于2018-06-01得票数 -2
2回答
我正在尝试使用最新的角度材料。我被mat-select组件卡住了。这是我的html。
<mat-form-field>
<mat-select placeholder="Favorite food" [(value)]="selectedLevel">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option
浏览 2提问于2019-03-13得票数 7
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
1回答
在之后，我有：
<mat-select [formControl]="tipoAttivitaSelect" multiple >
<mat-option #selectAll [value]="0" (click)="all()">
All
</mat-option>
<mat-option *ngFor="let attivita of mappaAttivita"
浏览 3提问于2019-10-10得票数 0
回答已采纳
1回答
我有以下角度材料，选择HTML：
<mat-select formControlName='personPersonDocumentTypes'>
<mat-option *ngFor="let dokumeti of MOQALAQEdokumentisTipebi" [value]="dokumeti">
{{dokumeti}}
</mat-option>
</mat-select>
MOQALAQEdokumentisTipebi是一个从网络API请求中得到更新的数组。默认情况下，我只想选择
浏览 1提问于2021-03-19得票数 0
回答已采纳
1回答
我有一张垫子桌子，用来呈现一组“竞争对手”。我试图添加一个垫子选择，允许用户选择哪个项目的竞争对手正在参加。
角度: 10.1.3
角材料: 10.2.2
到目前为止我有这个。
<mat-cell class="number-column" *matCellDef="let competitor">
<mat-form-field>
<!-- TODO Remove this debug -->
{{competitor.eventId}}
<mat-sel
浏览 2提问于2020-11-29得票数 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
回答已采纳
你好。我使用的是角形6和agular材料，我有一个字符串数组，我在一个mat-select表单字段中显示。如果用户选择一个元素，然后选择另一个元素，我需要跟踪以前的值是什么，新值是什么。
到目前为止，我已经能够使用$event.value获得当前值，但我还没有找到存储或获取以前值的方法。
<mat-select placeholder="Choose..." (selectionChange) ="checkTitle($event.value);">
<mat-option *ngFor="let op
浏览 2提问于2019-08-15得票数 5
回答已采纳
我需要根据用户的状态选择过滤区域。
因此，根据用户的状态选择，我需要将相应的区域绑定到我的地区下拉列表中
我用角度材料做用户界面
我试过了，但这不管用
.html
状态控制
<mat-select placeholder="State" formControlName="states" [(ngModel)]="selectedState" (ngModelChange)="getDistricts()">
<mat-option *ngFor="let state o
浏览 0提问于2021-01-05得票数 0
回答已采纳
19回答
我有一个垫子-选择所有选项都是在数组中定义的对象。我正在尝试将该值设置为默认选项之一，但是在页面呈现时它将被选中。
我的打字本文件包含：
public options2 = [
{"id": 1, "name": "a"},
{"id": 2, "name": "b"}
]
public selected2 = this.options2[1].id;
我的HTML文件包含：
<div>
<mat-select
[(value
浏览 33提问于2017-11-16得票数 155
回答已采纳
3回答
角材料的预选下拉
、、、
嗨，我用角度8的角度材料。
我需要预选的option在下楼。
我使用这个代码：
<mat-select *ngIf="justImage==true">
<mat-option selected (click)="setExtention('Picture',i)">
{{ 'ENUM.FILE_TYPE.Picture' | translate }}
</mat-option>
</mat-select>
但是它没有在下拉菜单中选择并禁用它。它是禁用的，但它
浏览 5提问于2019-11-18得票数 2
回答已采纳
2回答
列组件允许选择表中要显示的列和不显示的列。
<mat-form-field>
<mat-label>Columns</mat-label>
<mat-select [(ngModel)]="activeCols" multiple>
<mat-option *ngFor="let c of allCols" [value]="c">{{ c }}</mat-option>
</mat-select>
</mat-form-field>
浏览 4提问于2019-09-23得票数 1
回答已采纳
我用角度/材料
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
html有一个选择元素。
<mat-form-field>
<mat-label>Select book</mat-label>
<mat-select [(value)]="newBookId">
<mat-option [value]="null">no book</ma
浏览 5提问于2021-03-21得票数 0
回答已采纳
3回答
含材料组分的角形变化事件
、、、
我有一个表单，它包含输入、和材料组件(比如mat-select或mat-checkbox)。
每次用户进行修改时，我都希望将它们持久化到DB。所以我做了一些像<form (change)="save()">这样的事情。
对于本机输入，这是完美无缺的，但是当用户更改一个物质组件值时，它不会触发。
我宁愿避免在每个组件上使用<mat-select (selectionChange)="save()">这样的解决方案，因为当我必须更新表单时，我很容易忘记添加它。
编辑
这是一个模板驱动的表单。我的模板如下：
<form (change)=
浏览 0提问于2018-11-20得票数 8
回答已采纳
1回答
我有许多角度材料，选择下拉和他们各自的垫-选项是一种反应的方式更新，取决于其他值(换句话说，有过滤的选项)。它看起来像这样
<mat-select #selects (selectionChange)='formChanges()' [placeholder]='element.label' [disabled]='false' required>
<ng-container *ngFor="let opt of item.options; index as index">
<mat-opti
浏览 2提问于2018-11-23得票数 1
回答已采纳
2回答
我是新的角7材料设计，我正在工作的多下拉列表。
所以我一共有两个下拉列表，第二个下拉列表需要第一个的id。
这样，第二个下拉列表中的项目列表就会根据先前选择的项缩小范围。我不知道该怎么做，任何帮助都是非常感谢的。
服务
getAllMarkets(){
return this.http.get(this.url + 'allMarkets')
}
getProducts(id: number){
return this.http.get(this.url + 'products')
}
.ts
markets;
浏览 0提问于2019-03-12得票数 0
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
回答已采纳
2回答
从这个问题派生出来：
我面对这个问题的角度材料，特别是mat-select和它的mat-options：垫选项显示在其他组件之后。
我需要在下面组件上面的place holder之后显示这些选项(隐藏它)，而不是在后面或之间！在这种情况下，蓝色的矩形应该被绿色的矩形隐藏。
这里我的代码：
如何显示组件上方的选项列表，以及在select?的位置持有者下面的选项列表。
浏览 14提问于2022-01-18得票数 0
回答已采纳
我使用的是角度材料垫选择组件。
<mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort >
<ng-container matColumnDef="sensitive">
<mat-header-cell class="table-header header-p" *matHeaderCellDef> <b>sensitiv
浏览 0提问于2019-10-08得票数 2
回答已采纳
4回答
我正在使用angular-material select创建一个下拉列表，其中我提供了选择多个值的选项。
<accordion [showArrows]="true" class="programstyle">
<accordion-group heading="EVENTS" [isOpened]="true">
<div class="">
<mat-form-field class="w
浏览 0提问于2018-03-13得票数 6
回答已采纳
下面是我从角质材料中学到的例子
<mat-form-field appearance="fill">
<mat-label>Toppings</mat-label>
<mat-select [formControl]="toppings" multiple>
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
&
浏览 4提问于2020-08-16得票数 0
6回答
我正在显示一个下拉使用角材料垫选择。我想使用材料工具提示显示选定的元素。
<mat-select [(ngModel)]="emp" [(value)]="selected" matTooltip="{{selected}}
(openedChange)="oChange($event)" placeholder="Employee" [formControl]="toppings" multiple>
<mat-option *ngFor="let p of emp"
浏览 0提问于2018-06-06得票数 7
回答已采纳
<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
回答已采纳
我使用angular2 mat-select控件，并尝试更改其下拉列表菜单的宽度和位置，以匹配父元素(默认情况下，它更宽，并在几个像素内将元素溢出到两侧)。
我没有看到这样的选项在材料网站和覆盖css是复杂的，因为值依赖于元素宽度(需要它的所有选择菜单在我的网站)。
代码示例：
<mat-form-field class="col-sm-8 grey">
<mat-select [(value)]="selectedGroup">
<mat-option *ngFor="let item of groups
浏览 2提问于2018-04-26得票数 0
1回答
无论我在Angular 8项目中添加了什么角度材质元素(mat-tab、mat-button、mat-select、mat-input...)，它们都不会更新。例如，在mat-tab中，绘制了涟漪效果，但标签没有改变。垫子-按钮-切换显示了类似的行为。mat-select中的选项不会显示，mat-input中的浮动标签也不会浮动。我的代码基本上来自Angular Material页面：
在AppModule中导入BrowserModule和BrowserAnimationsModule。
HTML：
<mat-tab-group>
<mat-tab label="
浏览 14提问于2019-11-17得票数 0
回答已采纳
虽然这让我很困惑，但看起来还是挺容易的。
这是行之有效的：
<select (change)="onStatusChange($event)">
<option value="0">--{{ hello.status }}--</option>
<option value="pending" href="pendingHello()">Pending</option>
<option value=&#
浏览 1提问于2019-12-27得票数 1
回答已采纳
2回答
当我选择option variable isdate时，更改但检查是否不起作用
<mat-select
(selectionChange)="selectOption($event.value)"
[(ngModel)]="isDate">
<mat-option *ngFor="let item of dateTime" value="{{item.checkDateTime}}">
{{item.name}}
</mat-option>
</mat
浏览 1提问于2021-05-16得票数 1
3回答
我用的是角质材料。在我的父组件中
<app-multiselect
[optionsList]="propertyTypeList"
[multiple]=true
[placeholder]="Select"
></app-multiselect>
在.ts文件中的子组件中，我使用了一个@输入
@Input() placeholder: string;
在我的子html文件中
<mat-form-field>
<mat-select
[multiple]="multi
浏览 0提问于2018-10-19得票数 0
回答已采纳
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
回答已采纳
我正在使用ngx-translate，它工作得很好。下面的代码(取自官方示例)显示了当前的lang并允许我切换它：
<select #langSelect (change)="translate.use(langSelect.value)">
<option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option
浏览 4提问于2019-10-09得票数 2
回答已采纳
1回答
我正在尝试弄清楚如何取消mat-select (角度材料7.3.7)更改事件，并在事件处理程序中恢复到以前的状态。有可能吗？ 我的select控件： <mat-form-field>
<mat-select #visualOptionsSelect formControlName="competenceVisualOption" (selectionChange)="visualOptionSelectionChanged($event)"
浏览 15提问于2019-10-09得票数 1
回答已采纳
2回答
我正在创建一个角度的形式(见下文)。由于我正在创建的页面的逻辑，userEntitiesRoles数组可能会发生变化。因此，我需要确保为标记name提供唯一的mat-select属性，否则就会遇到问题。这就是为什么我尝试使用随机字符串的原因，下面报告的类型记录代码。然而，通过这种方式，在Chrome的控制台中，我得到了您在文章末尾发现的错误，我不明白为什么。你有什么建议吗？
html:
<div *ngFor="let item of userEntitiesRoles">
<mat-form-field>
<m
浏览 3提问于2021-03-31得票数 0
回答已采纳
2回答
配偶选择具有多重选择的特点。如何将包含多个选择的窗体控件值设置为空.在我的情况下，它不起作用..。
reset(){
this.form.reset();
return false
}
this.form = this.formBuilder.group({
category: [''],
});
模板中的
<mat-form-field appearance="outline">
<mat-label>Categories</mat-label&
浏览 1提问于2021-09-23得票数 0
如果这是重复的，很抱歉！所以我尝试将我的mat-select默认设置为列表中的第一个选项。听起来很简单，对吧？不对。我正在使用弹出的模式输入任务，并尝试设置默认状态(只有在选择项目后才能选择)。compareWith函数工作得很好，但是一旦退出模式并重新进入(不刷新页面)，compareWith函数中的第二个参数为null，并且状态不会缺省为任何值。当退出表单时，我重置了它。我用的是FormControl，不是ngModel，只是供参考。 我尝试了几个不同的compareWith函数，但只找到了一个可以工作的。我试过在select标签上使用[selected]="whatever&#
浏览 54提问于2019-01-23得票数 0
回答已采纳
8回答
在我的角度项目中，有角质的材料和使用垫-选择.mat-select是我的表单的第一个元素，在我的情况下，设置为自动焦点，而页面已成功加载，但我无法在Mat-select上设置自动焦点。任何人都可以帮我找到设置自动对焦的方法。
@ViewChild("name") nameField: ElementRef;
ngOninit() {
this.nameField.nativeElement.focus();
}
html
<div>
<mat-select [(ngModel)]="nameField" #name>
&
浏览 0提问于2019-02-08得票数 11
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
