在树组件中执行双向数据绑定

Question

我在我的项目中使用 tree 组件。当我从 父元素 中选择 子元素（即 HTML5）时（即 Web 技术）。选定的子 (HTML5) 元素显示在输入字段中，如下图所示。

除此之外，我想为 child element 分配一些值，并在选择 child element (HTML) 的同时将其显示在其他 div 中。As如下图所示。

这里我需要执行两种数据绑定。我为 select 组件 获得了资源，但无法为 tree 组件 获取它。这是stackblitz 链接。

Answer 1

DEMO

HTML：

<div class="text-inside">
    <mat-form-field>
        <input matInput placeholder="Select offering" [(ngModel)]="selectedItem" (focus)="showDropDown = true">
    </mat-form-field>
    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" *ngIf="showDropDown">
        <!-- Leaf node -->
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)="selectedItem = node.item;showDropDown = false;">
            <button mat-icon-button disabled></button> {{node.item}}
        </mat-tree-node>

        <!-- expandable node -->
        <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
            <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" (click)="loadChildren(node)" matTreeNodeToggle>
                <mat-icon class="mat-icon-rtl-mirror">
                  {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                </mat-icon>
              </button> {{node.item}}
        </mat-tree-node>

        <mat-tree-node *matTreeNodeDef="let node; when: isLoadMore">
            <button mat-button (click)="loadMore(node.loadMoreParentItem)">
                Load more...
              </button>
        </mat-tree-node>
    </mat-tree>
    <div [hidden]="!selectedItem || showDropDown">
        <div>
            List Of Guides {{selectedItem}}:
            <ul>
                <li *ngFor="let li of Guides">{{li}}</li>
            </ul>
        </div>
    </div>
</div>

编辑：

<div [hidden]="!selectedItem || showDropDown">
        <div>
            List Of Guides {{selectedItem}}:
            <ul>
                <li *ngFor="let li of getGuides(selectedItem)?.data">{{li}}</li>
            </ul>
        </div>
    </div>

TS：

Guides: Array<any> = [
    {name: 'css3' , data:  ['Tutorial Css3', 'Videos Css3' , 'Questions Css3']},
    {name: 'HTML5' , data :  ['Tutorial HTML5', 'Videos HTML5', 'Questions HTML5']},

    {name: 'Javascript', data:  ['Tutorial Javascript', 'Videos Javascript', 'Questions Javascript']},

  ]
  hideGuide: boolean = false;

  getGuides(selectedItem){
    return this.Guides.find(data => data.name == selectedItem )
  }