Question

我现在正在实现带有角材料树视图的组件，但是遇到一个问题，如果我更改了子节点的状态，那么父节点的状态也会改变。

我将显示以下代码：

<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="dynamic-filter-tree" #treeSelector>
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
    <li>
      <div class="mat-tree-node">
        <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.field">
          <mat-icon class="mat-icon-rtl-mirror" *ngIf="node.predicates.length>0">
            {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        <mat-select placeholder="Operator"
                    [(ngModel)]="node.op"
                    name="matSelect"
                    (selectionChange)="selectChanged($event.value)">
          <mat-option *ngFor="let operator of operators;let i=index" [value]="operator">
            {{operator}}
          </mat-option>
        </mat-select>
        <mat-form-field appearance="legacy" *ngIf="node.level === 0 ">
          <input matInput type="text" [(ngModel)]="node.field" name="node" placeholder="Field"/>
        </mat-form-field>
        <span style="padding-left: 10px"></span>
        <mat-form-field appearance="legacy" *ngIf="node.level === 0 ? (isPredicate ? false: true) : true">
          <input matInput type="text" [(ngModel)]="node.value" name="node" placeholder="value"/>
        </mat-form-field>
        <button *ngIf=" node.level === 0 || node.level === 1 && node.op === 'OR'"
                mat-icon-button
                (click)="addNewItem(node)">
          <mat-icon>add</mat-icon>
        </button>
        <button *ngIf="node.predicates.length ===0 && node.level!==0 " mat-icon-button (click)="remove(node)">
          <mat-icon>delete</mat-icon>
        </button>
      </div>
      <ul [class.dynamic-filter-tree-invisible]="!nestedTreeControl.isExpanded(node)">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>

从代码中可以看到

，在树形视图中有一个select，如果我选择select的选项，则输入字段将不显示。

但是现在的问题是，如果我从子节点的select中选择一个选项，则父节点的输入字段的状态也会更改，这意味着将不显示输入字段。

也许您有任何想法吗？

如果子节点的状态因角度材质树视图而改变，如何保持父节点状态

0 个答案: