在树组件上执行onclick操作

Question

我在我的项目中使用树组件。在树组件上方，我放置了一个名为select offering的输入组件，如下图所示。

在这里，我需要一些select组件中可用的操作。我的要求是：

1）当我进入输入字段时，只有树必须显示，如果我离开它必须隐藏。

2）当我从父元素中选择子元素时，例如，如果我选择HTML5（子元素），如下图像Web Technologies（父元素）中所示。要在输入字段中显示的子元素。

这是stackblitz链接

Answer 1

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