【问题标题】:Clarity + Angular6: Tree View Node Listener (clr-tree-node)Clarity + Angular6:树视图节点监听器(clr-tree-node)
【发布时间】:2019-04-14 00:00:05
【问题描述】:

我正在尝试跟踪对树节点数据源所做的更改。 每个节点都有一个反映节点选择状态的selected属性,每次我选择一个节点时,我都需要将选择发送给另一个组件,它会根据该选择构建另一棵树。

我尝试使用 OnChanges 接口,但后来我在文档中读到,只有在再次设置数据时才会调用 ngOnChanges。

这是我的简单模板:

   <clr-tree-node [(clrSelected)]="selected" >
        Asset
        <ng-template [clrIfExpanded]="true">
            <clr-tree-node *ngFor="let asset of assets" [(clrSelected)]="asset.selected">
                {{asset.type}}
            </clr-tree-node>
        </ng-template>
    </clr-tree-node>

是否有我可以绑定的树节点事件,我可以使用它来发出(使用 EventEmitter)更改的数据?例如 onSelectionChange、onChange 或其他什么? 还是其他机制?

提前致谢, 亚历克斯。

【问题讨论】:

    标签: angular angular6 treenode clarity angular-event-emitter


    【解决方案1】:

    据我所知,您已经绑定到该事件。只需使用双向绑定的长形式:

    模板.html

    <clr-tree-node [clrSelected]="selected" (clrSelectedChange)="changeSelected($event)">
        Asset
        <ng-template [clrIfExpanded]="true">
            <clr-tree-node 
                *ngFor="let asset of assets 
                [clrSelected]="asset.selected"
                (clrSelectedChange)="changeSelectedAsset(asset, $event)"
            >{{asset.type}}</clr-tree-node>
        </ng-template>
    </clr-tree-node>
    

    组件.ts

    @Component(...)
    export class MyComp {
        @Output public structureChange:EventEmitter<...> = new EventEmitter<...>();
    
        public changeSelected(data):void {
            this.selected = data;
            this.structureChange.emit(data);
        }
        public changeSelectedAsset(asset, data):void {
            asset.selected = data;
            this.structureChange.emit(this.selected);
        }
    }
    

    类似的东西。当然,尽可能添加数据类型。

    【讨论】:

    • 好的,谢谢!我错过了 (clrSelectedChange) 绑定:-)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-10-06
    • 1970-01-01
    • 2011-10-24
    • 2015-01-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多