Question

我在项目中使用了树组件。当我从父元素中选择子元素（即HTML5）时，（i，e Web Technologies）。所选的子元素（HTML5）显示在输入字段中，如下图所示。

与此同时，我想为子元素分配一些值并在选择子元素（HTML）的同时将其显示在其他div上。如下图所示。

这里我需要执行两种方式的数据绑定。我获得了选择组件的资源，但没有获得树组件的资源。这里是stackblitz链接

Answer 1

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 )
  }

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

1 个答案: