如何不在mat-select中显示选定的值
在mat-select中不显示选定的值，可以通过以下几种方式实现：
- 使用mat-select的placeholder属性：将placeholder属性设置为所需的默认提示文本，这样在未选择任何选项时，会显示该提示文本。示例代码如下：
<mat-form-field>
<mat-select placeholder="请选择">
<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>- 使用mat-select的displayWith属性：通过displayWith属性可以自定义显示在mat-select中的文本，可以返回空字符串来隐藏选定的值。示例代码如下：
<mat-form-field>
<mat-select [displayWith]="displayFn">
<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>displayFn(value: string): string {
// 返回空字符串来隐藏选定的值
return '';
}- 使用CSS样式控制显示效果：通过自定义CSS样式来隐藏选定的值。可以使用display: none;来隐藏选定的值。示例代码如下：
<mat-form-field>
<mat-select>
<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>.mat-select-value {
display: none;
}以上是三种常见的实现方式，根据具体需求选择适合的方式来隐藏mat-select中选定的值。
相关·内容
2回答
我有一个名为list的组件，在这个组件中，我将显示所有的customers list，如下图所示：选择特定的客户，我将发出客户id，并在另一个名为display的组件中显示id。
浏览 0提问于2019-02-04得票数 1
回答已采纳
下面是一个从Angular材质库中选择的简单示例 <mat-form-field class="ui20-filter-select"> <mat-select name="byPriority" [(ngModel)]="filter.priority (selectionChange)="filterChanged.nextmat-option [value]=&quo
浏览 64提问于2021-04-02得票数 0
回答已采纳
<mat-select [placeholder]="form.get('dataType')?.value === 'test' ?mat-select字段中的值保持不变。只有当我单击mat-select字段时，它才会改变。
为什么会这样呢？
浏览 6提问于2022-02-16得票数 0
回答已采纳
1回答
为了演示这个问题，我有一个表，其中显示了一个详细信息列表和几个mat-select，在选择一个选项时，这个标记选项的“大小”被加载到td中。问题是，它没有在选择选项的同一行中加载“大小”。大小显示在td中，但按自上而下顺序排列。
例如，如果没有选项标记，并且我从第3行中选择了一个选项，则该选项的“大小”将在第一行中加载，如果我在任何其他行中标记一个选项，数据将按照行的顺序加载。我有stackblitz的演
浏览 2提问于2021-09-07得票数 0
回答已采纳
1回答
使用jQuery，我能够使用以下内容检索正确的选定值：但是，当我尝试使用jQuery更新值时，该值会更新，但不会反映在屏幕上的组件上。例如：
$('#mat-select').val(); // eg. returns 'm
浏览 1提问于2018-11-23得票数 0
当Angular 5材质mat-select设置为disabled时，如何更改显示选定值的文本的字体颜色。目前，它默认为灰色，我想要更改它，以便它显示深蓝色，无论是禁用还是启用。<mat-form-field>
<mat-select placeholder="Select a Product" [(ngModel)]="selected" [disabled]=&qu
浏览 0提问于2018-04-29得票数 2
1回答
我似乎无法设置mat-select下拉列表的选定值。我有一个用于添加服务的组件，并使用相同的组件来显示已经添加的服务。我尝试使用NgModel并指定service.serviceId作为值，但它似乎从未在下拉列表中显示为选中状态。如何使用此组件允许用户选择服务，并使用bookingServiceTime中的数据作为预设的
浏览 1提问于2018-06-24得票数 0
1回答
我正在使用Angula9，并且我在ReactiveForm中有一个mat-select输入。我希望在表单外部显示选定的选项，而不是输入值，在相同的html模板内。div class="basic-container"> <mat-label>Category*</mat-label>
<mat-selectcategor
浏览 32提问于2021-02-01得票数 0
1回答
我想改变材料多选值css。<mat-form-field class="mat-form-field-fluid"> </mat-form-field> 当我检查浏览器源代码中的选定值时，我看到如下所示： <span class="ng-tns-c22
浏览 14提问于2020-01-27得票数 0
fixture.debugElement; testDropdown = debugElement.queryAll( By.css( 'mat-select].nativeElement;// How to get the selected value from the mat-selectbelow code, which is not working
console.
浏览 8提问于2019-08-11得票数 3
在mat-select multiple选项中，所有选定的值都显示在select字段中。如果选择了多个值，我只想要第一个选择的值以及+1或+2等。
浏览 0提问于2021-10-28得票数 0
我尝试使用[innerHTML] I <mat-option> of <mat-select>，它可以很好地处理下拉列表，但对所选的值不起作用。浏览器Google Chrome 68.0.3440.106 (正式构建)(64位)
<mat-form-field class="col-11">
浏览 0提问于2018-09-01得票数 4
回答已采纳
我试图访问一个值，我指的是select的当前值。我使用@ViewChild装饰器，检索到的对象很大，搜索后找不到值数据。我使用本地引用#类型的，因为将它放在未定义的检索上。<mat-form-field class="input-group">
浏览 3提问于2021-02-03得票数 0
1回答
我尝试使用typescript设置Mat Select的选定值。我有以下代码 <mat-form-field> <mat-option [value]="item.studentId*ngFor="let item of listOfStudents" > <&#x
浏览 28提问于2021-01-11得票数 1
2回答
我是新的角7材料设计，我正在工作的多下拉列表。这样，第二个下拉列表中的项目列表就会根据先前选择的项缩小范围。我不知道该怎么做，任何帮助都是非常感谢的。sure how to pass id).subscribe(res => {});
<mat-select</em
浏览 0提问于2019-03-12得票数 0
我有一个公司级，它有一个总部的地址字段。地址是一个接口，它有另一个对象，即国家，这是另一个接口。在我的数据库里我存储了所有的国家。我有一个编辑选定的公司的观点，在那里我可以设置或更改总部的地址，我为这些国家创建了一个mat-select：此代码将选定的国家保存到总部的国
浏览 1提问于2018-03-26得票数 4
回答已采纳
2回答
列组件允许选择表中要显示的列和不显示的列。<mat-form-field> <mat-select [(ngModel)]="activeCols" multiple><mat-option *ngFor="let c of allCols" [value]="c">{{ c }}<&
浏览 4提问于2019-09-23得票数 1
回答已采纳
我有对象的列表，它的下拉列表来源。在选择选择场景下拉菜单(ScenarioData.name)时，我们需要在选择环境下拉菜单中显示相同对象的ScenarioData的enabled：[]。如何做到这一点。
在表单提交时，我们需要从下拉列表中传递选定的名称和选定的环境。mat-option *ngFor="let scenario of scenarios" [v
浏览 0提问于2019-07-29得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
