我用角材料树视图创建了一个组件。
在此树形视图中,每个节点都有输入字段,问题是,如果单击“重置”按钮,如何重置完整的树形视图。
HTML代码:
t-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="dynamic-filter-tree" #treeSelector>
<mat-nested-tree-node *matTreeNodeDef="let node">
<li>
<div class="mat-tree-node">
<button mat-icon-button
matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.field"
*ngIf="node.predicates.length>0">
<mat-icon class="mat-icon-rtl-mirror">
{{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<mat-form-field appearance="legacy">
<input matInput type="text" [(ngModel)]="node.value" name="node" placeholder="value"/>
</mat-form-field>
</div>
<div class="dynamic-filter-add-delete-button">
<button
mat-icon-button
(click)="addNewItem(node)" *ngIf="node.op === operatorConstants.AND || node.op === operatorConstants.OR">
<mat-icon>add</mat-icon>
</button>
<button *ngIf="node.predicates.length ===0 && node.level!==0 "
mat-icon-button
(click)="remove(node)"
class="dynamic-filter-delete-button">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
<ul [class.dynamic-filter-tree-invisible]="!nestedTreeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>
<div class="dynamic-filter-button">
<button mat-button color="primary" (click)="resetData()">Reset</button>
<button mat-button color="primary" (click)="saveData()">Save</button>
<button mat-button color="primary" (click)="closeDialog()">Cancel</button>
</div>
在ts文件中,我有一个removeItem方法,此方法只能删除一个节点。
public remove(node: LocationFilterUiModel): void {
this.filterService.removeItem(node, this.filterService.data[0]);
this.renderChanges();
}
public removeItem(currentNode: LocationFilterUiModel, root: LocationFilterUiModel): void {
const parentNode = this.findParent(currentNode.parentId, root);
const index = parentNode.predicates.indexOf(currentNode);
if (index !== -1) {
parentNode.predicates.splice(index, 1);
this.dynamicFilterRawData.next(this.data);
this.parentNodeMap.delete(currentNode);
}
}
但是如何重置完整的树视图,例如初始化