angular - 对树组件执行 onclick 操作
问题描述
我在我的项目中使用树组件。在树组件上方,我放置了一个名为 select Offering 的输入组件,如下图所示。
在这里,我需要选择组件中可用的一些操作。我的要求是:
1)当我输入输入字段时,只有树必须显示,如果我离开它必须隐藏。
2) 例如,当我从父元素中选择子元素时,如果我选择HTML5(子元素) ,则如图所示Web Technologies (父元素)。要在输入字段中显示的子元素。
这是stackblitz链接
解决方案
1)您可以使用(焦点)事件来处理可见性
2)在项目上使用(点击)事件,在输入上使用ngModel。
代码:
<input matInput placeholder="Select offering" [(ngModel)]="selectedItem" (focus)="showDropDown = true">
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" *ngIf="showDropDown ">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)="selectedItem = node.item;showDropDown = false">
<button mat-icon-button disabled ></button>
{{node.item}}
</mat-tree-node>
....
</mat-tree>
我相应地编辑了您的代码: https ://stackblitz.com/edit/angular-h8zdkh-2qt9rg?file=app/chips-autocomplete-example.html
推荐阅读
- python - 为什么 os.fork() 之后 pyscard 无法连接到 pcscd 服务?
- multithreading - ColdFusion 动态线程名称
- c# - .NET Core Web API:自动加载不正确的 appsettings.json 文件
- tsql - T-SQL - 获取总逗留时间和第一天逗留时间
- python - 如何在熊猫中组合两个数据框?
- java - 映射时忽略 null 或 Optional.empty 值
- json - 将以下 XML 转换为 JSON 的 XSLT 是什么?
- sql - SQL 斯坦福迷你课程 - 电影平均评分之间的差异:问题背后的逻辑 + 没有此类表错误
- spring-cloud-gateway - Spring Cloud Gateway 和 DiscoveryClient 路由
- sql - i am geting an error that "SQL command not properly ended" for this query