angular - 输入onChange后设置图标
问题描述
我想在输入字段后添加图标,它将在更改时显示。和另一个图标,如果它不在焦点上。
谁能帮助我,我已经尝试过类似下面的方法,但我不知道如何在其中切换图标。
<input matInput type="text" style="width: 200px;">
<button mat-mini-fab style="float: right;" color="primary" (click)="element.disabled = !element.disabled">
<mat-icon>{{element.disabled ? 'home' : 'edit'}}</mat-icon>
</button>
谢谢
解决方案
我找到了一种方法。
在 .ts 文件中定义两个布尔变量。并更改输入元素的焦点和焦点事件的值。
home: boolean = false;
edit:boolean = true;
onFocusOutEvent(event: any){
// toggle as you want to use it.
}
onFocusEvent(){
// toggle as you want to use it.
}
在 HTML 文件中
<input matInput type="text" [formControlName]="element.id" (focusout)="onFocusOutEvent($event)" (focus)="onFocusEvent($event)" >
<button style="float: right;" color="primary" *ngIf="edit">
<mat-icon>edit</mat-icon>
</button>
<button *ngIf="home" style="float:left;">
<mat-icon>home</mat-icon>
</button>
我希望它对某人有帮助。谢谢你
推荐阅读
- sql - 将带有参数的数组传递给 Codeigniter 4 中的模型
- php - PHP UOPZ 扩展引起的 Laravel 7 composer 自动加载错误
- python - Pandas 格式单元格包含 Pandas DataFrame to_string 中的浮点列表
- javascript - 试图让一个计数器与 React 和多个组件一起工作
- javascript - 如何使用 jQuery/Ajax 将元素的 ID 从我的 DataTable 传递到我的按钮?
- javascript - 在Javascript中的引号内查找字符串
- javascript - 使用 nodeJS 和 EJS 将数据对象发送到另一个页面
- uml - 如何在 UML 类图中用方法表示枚举类
- python - 单元测试模拟在 Python 中的 rest API 请求上失败
- python - Django 模型:2 个子查询有问题(无外键)