html - @circlon/angular-tree-component: Angular10'da onay kutuları kullanarak herhangi bir yaprak yüklenmeden üst öğede (select) olayını tetikleyemiyor
Senaryo Merhaba, Angular'da @circlon/angular-tree-component kullanıyorum (hem 10 hem de 11 sürümünü denedim) ve her düğümün çocuklarını asenkron bir şekilde genişleterek yüklüyorum (temel olarak başlangıçta tüm yolları yüklüyorum, sonra bir düğümü ok kullanarak genişletirsem, çocuklarını yükler ve bu şekilde devam ederim, ta ki hasChildren özelliği false olarak ayarlanmış bir yaprağa ulaşana kadar ki o yaprak genişletilemez).
Sorun Sorun şu ki, hem yapraklarda hem de üst düğümlerde onay kutuları kullanıyorum, yani ağacın her düğümü için bir onay kutum var. Bir düğümün onay kutusunu işaretlediğimde (yani onay kutusuna tıkladığımda) (select) olayının tetiklenmesini bekliyorum, ancak bu yalnızca düğümün herhangi bir çocuğu yoksa, yani bir yapraksa çalışıyor. Diğer tüm durumlarda, örneğin hasChildren=true olan ama henüz yüklenmiş bir çocuğu olmayan bir düğümüm varsa, görsel olarak onay kutusunun işaretlendiğini görebiliyorum ama seçme olayı tetiklenmiyor. Düğümleri manuel olarak genişleterek en az 1 çocuğa ulaştığımda, üst düğümü seçebiliyorum ve tüm alt düğümler yapraklara kadar seçilmiş oluyor.
Beklenen davranış Aşağıdaki davranışı bekliyordum ama bunu elde edip edemeyeceğimi bilmiyorum: temelde herhangi bir düğümü işaretleyebilmek istiyorum, düğümün çocuğu olsun ya da olmasın (select) olayını tetiklemek istiyorum, sadece seçilen ID'lerin listesini almam gerekiyor. Bu mümkün mü?
Bu benim ağacımın HTML'si:
<tree-root #tree
[focused]="true"
[nodes]="this.alberatura.treeNodes"
[options]="this.alberatura.options"
[(ngModel)]="this.selectedNode"
(moveNode)="this.alberatura.nodeMoved($event)"
(focus)="this.alberatura.selectNode($event)"
(dblclick)="openModalEditTree(editElementoTree, this.alberatura.selectedNode)"
(select)="this.alberatura.onSelect($event)"
(deselect)="this.alberatura.onDeselect($event)"
(loadNodeChildren)="true",
ngDefaultControl>
<ng-template let-node let-index="index">
<div>
<span>{{index + 1}} - {{ node.data.name }}</span>
</div>
</ng-template>
<ng-template #loadingTemplate>Loading, please hold....</ng-template>
</tree-root>
Ve bunlar benim seçeneklerim:
this.alberatura.options = {
allowDrag: true,
allowDrop: true,
useCheckbox: true,
actionMapping: this.actionMapping
}