angular - Clarity + Angular6:树视图节点监听器(clr-tree-node)
问题描述
我正在尝试跟踪对树节点数据源所做的更改。每个节点都有一个反映节点选择状态的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 或其他什么?还是其他机制?
在此先感谢,亚历克斯。
解决方案
据我所知,您已经绑定到该事件。只需使用双向绑定的长形式:
模板.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);
}
}
像这样的东西。当然,尽可能添加数据类型。
推荐阅读
- c++ - LNK2001 .dll 中未解析的外部符号 _main 并声明了 DllMain?
- azure-active-directory - 如何告诉我的用户的计算机对 Azure 进行身份验证
- php - 将 id 添加到 Guzzle 请求
- firebase - C# Blazor WASM | Firestore:使用 Google.Cloud.Firestore.FirestoreDb.CreateAsync 时收到混合内容错误
- c# - .NET Core 3.1 SOAP 平台不支持错误“不支持编译 JScript/CSharp 脚本”
- c# - 在 Windows 10 中获取公历日期而不是回历日期
- cookies - 设置了没有“SameSite”属性的 cookie。...但我做到了
- python - 创建作业或管道以运行使用 pandas_gbq 摄取 big_query 表的脚本的最佳选择是什么?
- javascript - 如何通过在 ComponentDidMount() 中调用的函数访问状态集
- pandas - 美丽的汤提取行和数据