我正在项目中使用树组件。我在树组件上方放置了一个称为选择商品的 input 组件,如下图所示。
在这里,我需要 select 组件中的一些操作。我的要求是:
1)当我输入输入字段时,只有树必须显示,如果离开,则必须隐藏。
2)例如,当我从父元素中选择子元素时,如果我选择 HTML5 (如下面的图像 Web Technologies (父元素)所示)(子元素)。要在输入字段中显示的子元素。
这是stackblitz链接
答案 0 :(得分:1)
1)您可以使用(focus)事件来处理可见性
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