本文介绍了如何使'mat-select'只读?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
限时送ChatGPT账号..我正在处理一个 angular 5 项目.有许多 mat-select
元素应该像文本框一样只读.我发现有一个 disabled
功能是:
I am working on a angular 5 project. There are many mat-select
elements which is supposed to be readonly like text boxes. I found out that there is a disabled
feature which is:
<mat-form-field>
<mat-select placeholder="Choose an option" [disabled]="disableSelect.value">
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
输出看起来像:
文字淡出,下面的内衬有变化,可以设为只读吗?
It fades out the text and the lining below get changes, is it possible to make it readonly?
推荐答案
向 select 块和 mat-form-field 块添加 CSS,这些可以自动应用于所有选择元素:
Add CSS to both select block and mat-form-field block, these can be applied automatically to all the select elements:
<mat-form-field class="readonly-wrapper">
<mat-select class="readonly-block" placeholder="Choose an option" [disabled]="disableSelect.value">
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
CSS 代码:
.readonly-wrapper {
cursor: not-allowed;
}
.readonly-wrapper .readonly-block {
pointer-events: none;
}
这篇关于如何使'mat-select'只读?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论