如何重设树状视图的角度材质

时间:2019-11-20 13:48:54

标签: angular tree angular-material

我用角材料树视图创建了一个组件。

在此树形视图中,每个节点都有输入字段,问题是,如果单击“重置”按钮,如何重置完整的树形视图。

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

但是如何重置完整的树视图,例如初始化

0 个答案:

没有答案