对树组件执行onclick操作

时间:2018-09-07 06:09:04

标签: angular angular-material

我正在项目中使用组件。我在组件上方放置了一个称为选择商品的 input 组件,如下图所示。

enter image description here

在这里,我需要 select 组件中的一些操作。我的要求是:

1)当我输入输入字段时,只有必须显示,如果离开,则必须隐藏。

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

这是stackblitz链接

1 个答案:

答案 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