html - 在选项中选择嵌套标签可防止调用方法
问题描述
当我单击带有选项的任何位置时,我正在尝试调用一个方法。
当您单击选项中的任何嵌套标签时,选择托盘将消失而不调用该方法。
如果您选择任何空白或任何未嵌套的文本,则将调用该方法。
<mdb-auto-completer
#completerBillTo
#auto="mdbAutoCompleter"
textNoResults="I have found no results :("
[appendToBody]="true">
<mdb-option
*ngFor="let billTo of resultsBillTo | async"
[value]="billTo.name"
(click)="updateAccountInfo( billTo, _accountService.accountFormGroup)">
<small><strong> Id: {{ billTo.id }} </strong></small>
{{ billTo.name }}
<small>Value: {{ billTo.value }}</small>
</mdb-option>
</mdb-auto-completer>
我尝试创建一个覆盖 div 并将其放置在所有元素的前面,但单击 div 不会在单击时调用任何内容。
解决方案
从文档中,mdbAutoCompleter
有一个select
事件。选择选项后,事件将开火。
<mdb-auto-completer
#completerBillTo
#auto="mdbAutoCompleter"
textNoResults="I have found no results :("
[appendToBody]="true"
(select)="updateAccountInfo($event)"
>
<mdb-option
*ngFor="let billTo of resultsBillTo | async"
[value]="billTo"
>
<small><strong> Id: {{ billTo.id }} </strong></small>
{{ billTo.name }}
<small>Value: {{ billTo.value }}</small>
</mdb-option>
</mdb-auto-completer>
如果只是在您选择标签时,您可以使用 css 修复此问题:
<mdb-option class="parent-class">
.parent-class {
small, strong {
pointer-events: none;
}
}
这将删除small
andstrong
元素的点击事件。
推荐阅读
- python - 从类内部加载 MongoEngine 文档
- html - DOCTYPE 和背景图像
- reactjs - 导航回到主页时如何解决布尔错误?
- sapui5 - SmartTable 控件自 1.74 以来存在内部加载资源错误
- sql - 在 jenkins 上使用 groovy 脚本连接 SQL 数据库
- matlab - Simulink:FOR 迭代器和选择器块
- sql - ORA-01007: 变量不在选择列表中 ORA-06512: 在第 32 行
- google-cloud-platform - 有没有办法在 Dataflow 中拆分/自动缩放 gzip 源文件?
- encryption - 这个登录到我的 rest-api 服务器的过程是否有点安全?
- javascript - ReactJS 重新渲染不适用于 CSS